Typeof operator Trouble

Question

I have a div that has hidden text.This text can only be displayed if the text contents of another div equal a string. To do this, i wrote the function below:

function show() {
    if(typeof genDiv.innerHTML == "string") {
        showDiv.innerHTML = fullhiragana[h];
    } else {
        alert("Please generate the Romaji before requesting the Hiragana to be displayed.");
    }
}
     //fullhiragana is an array that has the data that 'showDiv' is supposed to display.
      'h' is a var that randomly picks a string from fullhiragana.//

In a way, it works. It displays the text if I press the button, but it does this regardless of the type of content in the other div. It even works if there is no content in the first div. Maybe I've constructed the if conditional wrong? Help please! see this printscreen for further reference of the problem; http://prntscr.com/5o7q59

`genDiv.innerHTML` is a string of HTML representing the content of `genDiv`. It’s always a string, even when it’s empty. Are you looking to check whether the element is empty, or something else? — Ry-, Jan 04 '15 at 01:17
@U2744SNOWFLAKE wow I did not know that. Even so, I'm checking to if the content of genDiv is a string. Even in the case of nothing, the data type still wouldn't be a string(i forgot if its undefined or null or maybe something else) — AlienC, Jan 04 '15 at 01:21
No, in the case of nothing it’ll be the empty string (`""`) – even for void elements like ``. (This isn’t true of “empty” things in general, but it is for the `innerHTML` property.) — Ry-, Jan 04 '15 at 01:23
@U2744SNOWFLAKE ok, but if its not a string than the else statement should shoot an alert. It still does not display the alert, so I created an else if statement that checks(without the typeof operator) if the innerHTML equals "" and it should shoot an alert, but now when I click the button, nothing happens; the alert doesn't shoot, and there is no longer data showing. — AlienC, Jan 04 '15 at 01:32
It *is* a string. The type of an empty string is still `"string"`. — Ry-, Jan 04 '15 at 01:35
@AlienC— *innerHTML* is a property of a host object and is defined by the [*W3C HTML 5 specification*](http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0). It uses the [*HTML fragment serialization algorithm*](http://www.w3.org/TR/2008/WD-html5-20080610/serializing.html#html-fragment) which starts: `Let s be a string, and initialise it to the empty string.`. If there is no content to serialise, then the empty string is returned. — RobG, Jan 04 '15 at 01:35

score 1 · Answer 1 · answered Jan 04 '15 at 01:50

typeof(genDiv.innerHTML == "string") is always true. So it is true even if the div is empty or has a number or arithmetic operator like(+, &, %, -), etc...

If there is no content in the first div, genDiv.innerHTML is the empty string ("").

What you can do to check if something has been entered in to the input field is:

if(genDiv.innerHTML.length>0) {
    showDiv.innerHTML = fullhiragana[h];
}

Also, it is better to use genDiv.value instead of genDiv.innerHTML if you want to get the content of an input field.

score 0 · Answer 2 · answered Jan 04 '15 at 02:06

Regarding the user of innerHTML.length, this should work in modern browsers, but be aware that some older (IE) browsers may return true even when there is no text since the innerHTML property may include whitespace. You may want to clear leading and trailing whitespace before you check that condition.

score 0 · Answer 3 · edited May 23 '17 at 12:20

0

Building upon raneshu's answer, an empty String object resolves to a falsy value in JavaScript i.e. one could operate upon a String via type conversion to a Boolean:

if (!container.innerHTML) {
    console.log('#container has no content!');
}

See this JSFiddle for a working example.

Also, here's some information on falsy values in JavaScript, including Strings.

edited May 23 '17 at 12:20

Community

1
1

answered Jan 04 '15 at 02:17

James Wright

3,000
1
18
27

Typeof operator Trouble

3 Answers3