Javascript/html help! Should be simple

Question

I'm making a page that should display the variable of my choosing within a table. I did the same thing twice, changed the id's and cuch, but only one works. I spent an hour looking over the syntax, and redoing allot of the work but it just doesn't help. Here's the three main pieces of code:

var NewGlad = new Array("Jokomopo","Etony","Roy");
var BestGlad = new Array("Johnny","Cod","Billy");

function UpdateTable(){

    document.getElementById("0New").innerHTML = "<a href='" +NewGlad[0]+ "'>" + NewGlad[0] + "</a>";


    document.getElementById("0Best").innerHTML = "<a href='" +BestGlad[0]+ "'>" + BestGlad[0] + "</a>";

}

//The function above IS executed onLoad.

Here's the html, I'll just show you the table row we're dealing with:

<tr>

<td class="NewestGlads" id="0New">
fgggrf
</td>

<td class="BestGlads" id="0Best">
fgggrf
</td>

</tr>

Only the NewestGlads td is updated. The other still displays "fgggrf"

I dont see any problem(FF11). It is working good: http://jsfiddle.net/8dsCa/ — mshsayem, Apr 12 '12 at 03:34
Might be a problem with your browser and those numeric-prefixed ID attributes. See http://stackoverflow.com/a/79022/283366 — Phil, Apr 12 '12 at 03:35

score 2 · Accepted Answer · answered Apr 12 '12 at 03:38

Don't say this should be easy. If it were easy you would not be asking us for the answer. You code could use some refinement:

var UpdateTable = function () {
        "use strict";
        var NewGlad = ["Jokomopo", "Etony", "Roy"],
            BestGlad = ["Johnny", "Cod", "Billy"];
        document.getElementById("New0").innerHTML = "<a href='" + NewGlad[0] + "'>" + NewGlad[0] + "</a>";
        document.getElementById("Best0").innerHTML = "<a href='" + BestGlad[0] + "'>" + BestGlad[0] + "</a>";
    };

I changed your references so that they are starting with an alpha character instead of a number. Your HTML will need to change to match. I have never seen identifiers starting with a number and believe it to be a bad convention that could be error prone cross browser. Try this instead by calling the UpdateTable function. You can also execute this without a call by making the code as follows:

var UpdateTable = (function () {
        "use strict";
        var NewGlad = ["Jokomopo", "Etony", "Roy"],
            BestGlad = ["Johnny", "Cod", "Billy"];
        document.getElementById("New0").innerHTML = "<a href='" + NewGlad[0] + "'>" + NewGlad[0] + "</a>";
        document.getElementById("Best0").innerHTML = "<a href='" + BestGlad[0] + "'>" + BestGlad[0] + "</a>";
    }());

score 0 · Answer 2 · answered Apr 12 '12 at 03:42

I just used your code, and this gave me the correct result you are going for

<html>
<head>
<script>
    var NewGlad = new Array("Jokomopo","Etony","Roy");
    var BestGlad = new Array("Johnny","Cod","Billy");

    function UpdateTable(){
        document.getElementById("0New").innerHTML = "<a href='" +NewGlad[0]+ "'>" + NewGlad[0] + "</a>";
        document.getElementById("0Best").innerHTML = "<a href='" +BestGlad[0]+ "'>" + BestGlad[0] + "</a>";

    }
</script>
</head>
<body onload="UpdateTable();">
<table>
<tr>
    <td class="NewestGlads" id="0New">fgggrf</td>
    <td class="BestGlads" id="0Best">fgggrf</td>
</tr>
</table>
</body>
</html>

score -1 · Answer 3 · answered Apr 12 '12 at 03:42

-1

The innerHTML is incorrect.

Should read

document.getElementById("0New").innerHTML = "<a href=\"" +NewGlad[0]+ "\">" + NewGlad[0] + "</a>"; 
document.getElementById("0Best").innerHTML = "<a href=\"" +BestGlad[0]+ "\">" + BestGlad[0] + "</a>";

I.e double quotes around the href.

Also the IDs should start with a letter. Change them to New0and Best0

answered Apr 12 '12 at 03:42

Ed Heal

59,252
17
87
127

Single quote and double quote characters are valid in XML and HTML per the W3C so long as the opening quote character matches its closing partner of a given quote pair. – austincheney Apr 13 '12 at 03:19

Javascript/html help! Should be simple

3 Answers3