Javascript String Comparison returning 'undefined' in my div container

Question

I have the following Javascript code where I am simply comparing two string values and am attempting to return the result in my div container via an innerHTML command. However, my output is always being displayed as "undefined".

Javascript code:

function speak () {

var lang = "fr";
var enlang = "en";  
var n = lang.localeCompare(enlang);

if (n == 0)
    {
        var message1 = "blah";
        document.getElementById('percentage1').innerHTML= message1;
    }
    else
    {
        var message2 = "blah2";
        document.getElementById('percentage1').innerHTML = message2;
    }
}

HTML:

<script src="speak.js">speak();</script>
<div id="percentage1"><p></p></div>

code is all okay, check your HTML if it contains element with ID 'percentage1'! — Sunny Sharma, Mar 11 '14 at 05:06

CJ Ramki · Answer 1 · 2014-03-11T05:31:37.897

IF YOU WANT TO LOAD IT IN WINDOW LOAD, YOU CAN WRITE THAT LOGIC IN YOUR JAVASCRIPT ITSELF.

HTML

<div id="percentage1"><p></p></div>

Javascript

 window.onload = function speak() {

var lang = "fr";
var enlang = "en";  
var n = lang.localeCompare(enlang);

if (n === 0)
    {
        var message1 = "blah";
        document.getElementById('percentage1').innerHTML = message1;
    }
    else
    {
        var message2 = "blah2";
        document.getElementById('percentage1').innerHTML = message2;
    }
};

if you want to print within<p>tag, use this

  window.onload = function speak() {

var lang = "fr";
var enlang = "en";  
var n = lang.localeCompare(enlang);

if (n === 0)
    {
        var message1 = "blah";
        document.getElementById('percentage1').firstChild.innerHTML = message1;
    }
    else
    {
        var message2 = "blah2";
        document.getElementById('percentage1').firstChild.innerHTML = message2;
    }
};

SEE THIS DEMO

score 0 · Accepted Answer · answered Mar 11 '14 at 05:03

There is no call being made to your function.

You could try using <body onload="speak()"> or something to call it up.

Also try putting the new innerHTML values in string quotations.

<html>
<head>
    <script type="text/javascript">
    function speak() {

var lang = "fr";
var enlang = "en";  
var n = lang.localeCompare(enlang);

if (n == 0)
    {
        var message1 = "blah";
        document.getElementById('percentage1').innerHTML = "message1";
    }
    else
    {
        var message2 = "blah2";
        document.getElementById('percentage1').innerHTML = "message2";
    }
}
    </script>
</head>
<body onload="speak()">
    <div id="percentage1">blah blah blah</div>
</body>
</html>

apart from that and there being a space in between speak and the parentheses "()" I don't see any issues, works fine for me — MunkyMead, Mar 11 '14 at 05:05

score 0 · Answer 3 · answered Mar 11 '14 at 05:14

Are you sure this is the minimalist sample to reproduce your problem? I took your javascript and made this, which wrote 'blah2' into the page:

<!DOCTYPE html>
<html>
<head>
<title>JS Test</title>
<script type="text/javascript">
function speak () {

    var lang = "fr";
    var enlang = "en";  
    var n = lang.localeCompare(enlang);

    if (n == 0)
    {
        var message1 = "blah";
        document.getElementById('percentage1').innerHTML= message1;
    }
    else
    {
        var message2 = "blah2";
        document.getElementById('percentage1').innerHTML = message2;
    }
}
</script>
</head>
<body onload="speak()">

Percentage1: <span id="percentage1"></span>

</body>
</html>

I think your problem is elsewhere.

score 0 · Answer 4 · answered Mar 11 '14 at 05:41

I actually figured out what was happening. My code was actually correct but when I kept making updates to my server via Filezilla, it was pulling the original code and not properly updating itself.

I fixed this problem by saving my updated .js file to another name and it worked fine.

Thank you all for your support, it is much appreciated!

Javascript String Comparison returning 'undefined' in my div container

4 Answers4