GetElementById not finding ID

Question

Hi I have been working on this code that creates a table with radio buttons for each word. Currently that works perfectly, however I am not making an on click function on the radio button and submit. They both get to the function being called when clicked, but once in the function and i call getElementById to validate or change color the ID is not found or at least thats what I assume because after putting an alert, nothing appears.

I am relatively new at javascript so any advice would help. I was told it might be because they are being called before created but from what I can see in my code thats not the case. Any suggestions?

edit:

This is the code from where trouble arises. Only the spanish once has the on click on it. Didn't put the submit validate because i figured they are the same problem

for (i = 0; i < sentences.length; i++) {
    document.write('<p><a onclick ="javascript:ShowHide(\'Sentence' + (i + 1) + '\')" href="javascript:;"><font color="#0000FF"><u>Sentence' + (i + 1) + '</u></font></a></p>');
    document.write('<table style="display: none; table-layout: fixed" id="Sentence' + (i + 1) + '" border = "1">');
    writeSentence(i, words, "Sentences");
    document.write('</table>');
    document.write('<input type="checkbox" name="Sentence_lang ' + (i + 1) + '" id = "Sentence_lang ' + (i + 1) + '" value="All_English" /> All English    ');
    document.write('<input type="checkbox" name="Sentence_lang ' + (i + 1) + '" id = "Sentence_lang ' + (i + 1) + '" value="All_Spanish" /> All Spanish <br />');
}
document.write('</p>')

function writeSentence(i, array, name) {
    var Name = name;
    document.write('<tr>');
    document.write('<td>');
    document.write('</td>');
    for (j = 0; j < array[i].length; j++) {
        var word = array[i][j];
        document.write('<td>');
        if (Name == "Sentences") document.write('<span class="kept" id="word_' + i + '_' + j + '">');
        document.write(word);
        if (Name == "Sentences") document.write('</span> ');
        document.write('</td>');
    }
    document.write('</tr>');
    document.write('<td>');
    document.write('English');
    document.write('</td>');
    for (j = 0; j < array[i].length; j++) {
        document.write('<td>');
        document.write('<input type="radio" name="' + Name + (i + 1) + '_' + (j) + '" id="Eng_' + (i + 1) + '_' + (j) + '" value="English" >');
        document.write('</td>');
    }
    document.write('</tr>');
    document.write('<tr>');
    document.write('<td>');
    document.write('Spanish');
    document.write('</td>');
    for (j = 0; j < array[i].length; j++) {
        document.write('<td>');
        document.write('<input type="radio" onclick = "color(' + i + ',' + j')" name="' + Name + (i + 1) + '_' + (j) + '" id="Spa_' + (i + 1) + '_' + (j) + '" value="Spanish"> ');
        document.write('</td>');
    }
    document.write('</tr>');
    document.write('<tr>');
    document.write('<td>');
    document.write('Other');
    document.write('</td>');
    for (j = 0; j < array[i].length; j++) {
        document.write('<td>');
        document.write('<input type="radio"  name="' + Name + (i + 1) + '_' + (j) + '" id="Other_' + (i + 1) + '_' + (j) + '" value="other" > ');
        document.write('</td>');
    }
    document.write('</tr>');
    if (Name == "Sentences") for (j = 0; j < array[i].length; j++)
    document.write('<input type="radio" input style= "display: none" name="' + Name + (i + 1) + '_' + (j) + '" id="' + Name + (i + 1) + '_' + (j) + '" value="Norm" checked>');
}

function color(i, j,lang) {
    var word = document.getElementById('word_' + i + '_' + j + '');
    aleart(word);
    if (lang == "Spa") word.className = "blue";
}

edit the last if statement is what I'm trying to do. The third parameters is currently empty because i could not figure out how to pass the string Spa properly. But i can go around that if needed.

You forgot a `;` after `document.write('')` on the 9th line of code. — Alex W, Jun 26 '12 at 14:37
You should be using a debugger - I suggest Firebug in Firefox. Also, I recommend you a JS API: either prototype or jQuery. — mihaisimi, Jun 26 '12 at 14:38
Have you tried using Chrome Developer tools or Firebug to debug and step through your program? If not, you should definitely try. You will run into tons of these issues in the future. Debugging is the way to go for resolving these pesky issues. — ZnArK, Jun 26 '12 at 14:40
ouch simple mistakes i spent so much time on. Thank you. Let me apply this to the validate part and see if it all goes well Thank you, i will look up the debuggers :) — jacobLoz, Jun 26 '12 at 14:40
I suggest instead of doing multiple `document.write()` calls, to build up the output into a string, and then do a single `document.write()` at the end: this is more efficient, as the browser has to re-render the page after every `document.write()` call. Also, try running this code through [JSHint](http://www.jshint.com/). It will highlight a few other things that you might want to fix. — Spudley, Jun 26 '12 at 21:39

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

0

You've got a typo: aleart(word);, the error should be visible in your console. Change it to alert(word); and the alert box should appear.

Apart from that, you should not use document.write. It won't work once the document is loaded. See Alternatives to document.write or What are alternatives to document.write?

edited May 23 '17 at 12:12

Community

1
1

answered Jun 26 '12 at 14:39

Bergi

630,263
148
957
1,375

GetElementById not finding ID

1 Answers1