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.

Answer 1

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?