Automatic Form’s Generator with innerHTML

Question

I have a browser game ready. It’s a game that only puts the answer in one form, if it’s right, gets points, changes an image, blocks the text box and a few other things. In a v2 of this system, my idea was an automatic generator of these questions, for example, I have in another file several questions and answers, I know, 60. Hence the system will already create these 60 Forms automatic when possible load on the page.

I was trying to implement how innerHTML:

function mais(campo) {
var i;
var k;
for (i=0;i<campo;i++) {
Linha1 = "<form method='POST' onkeyup='validar('0')' onkeypress='validar('0')' name='anime0'>";
Linha2 = "<div align='center'><img id='imagem0' src='fundo.png'/></div>";
Linha3 = "<audio controls preload='auto' id='playTune'><source src='music/001.mp3'></audio>";
Linha4 = "<div align='center'><br />Nome do Anime<br />";
Linha5 = "<input name='caixa0' type='text' id='caixa0' size='30' maxlength='30'/><br /><br /></div></form>";
Linha6 = "<input type='checkbox' name='itemName11' onclick='verificaChecks('11')' id='item34'/>Dica 1: (-1Pts)<input type='text' id='txt34' size='40' maxlength='40' disabled/>";
document.getElementById("Linha1").innerHTML+=Linha1+Linha2+Linha3+Linha4+Linha5+Linha6;

/Lá em baixo, no body:
<div id="Linha"  align="center">
</div>

---

I tested it this way and it wasn’t. Text boxes work. But no JS function works. How: onkeypress='validar('0')' nem onclick='verificaChecks('11')'

I did a test putting the form already on body and only adding by innerHTML the rest of the code. Hence the function of form works, but the Checklist not yet, probably still being inserted by innerHTML. I only did this for testing because I need the form to be created in innerHTML.

The impression is that when some content is added, being form’s or checklists with functions in the div for innerHTML functions cannot find path to file .js as out of scope.

Answer 1

I’ve been looking at the code and you’ve got a lot of custom stuff. You should have more general code... less customized...

It’s okay to add code that way. Best said: adding in this way shouldn’t make the mistake you have, but there are better ways to do it...

An example of the same functionality: http://jsfiddle.net/27rrna3d/

The problem here is the quotation marks. Note that you are opening the string with " and then inside the string to use onclick='verificaChecks('11')'. Change this to onclick='verificaChecks( "11")'. The question arises: why not simply onclick='verificaChecks(11)'? in number format instead of string?

Here are other suggestions that I imagine solve/help the problem as well.

Since you’re using jQuery instead of this:

function verificaChecks(n) {
    numeroTemp = parseInt(n);
    if (document.getElementsByName("itemName" + n)[0].checked == true) {
        document.getElementById("txt" + (numeroTemp + numeroTemp + numeroTemp + 1)).value = arrayNomesAnimes[numeroTemp].dica1;
        desabilitaCheckBox("item" + (numeroTemp + numeroTemp + numeroTemp + 1));
    }

    if (document.getElementsByName("itemName" + n)[1].checked == true) {
        document.getElementById("txt" + (numeroTemp + numeroTemp + numeroTemp + 2)).value = arrayNomesAnimes[numeroTemp].dica2;
        desabilitaCheckBox("item" + (numeroTemp + numeroTemp + numeroTemp + 2));
    }

    if (document.getElementsByName("itemName" + n)[2].checked == true) {
        document.getElementById("txt" + (numeroTemp + numeroTemp + numeroTemp + 3)).value = arrayNomesAnimes[numeroTemp].dica3;
        desabilitaCheckBox("item" + (numeroTemp + numeroTemp + numeroTemp + 3));
    }
}

You can use it like this and it fits all cases:

function verificaChecks(n) {
    numeroTemp = parseInt(n);
    $('[name="itemName' + n + '"]').each(function(i){
        var numero = 3*numeroTemp + i;
        if (this.checked){
            $('#txt' + numero).val(arrayNomesAnimes[numeroTemp].dica1);
            desabilitaCheckBox("item" + numero);
        }
}

In the code you have in the question you can replace:

function mais(campo) {
    var i;
    var k;
    for (i = 0; i < campo; i++) {
        Linha1 = "<form method='POST' onkeyup='validar('0')' onkeypress='validar('0')' name='anime0'>";
        Linha2 = "<div align='center'><img id='imagem0' src='fundo.png'/></div>";
        Linha3 = "<audio controls preload='auto' id='playTune'><source src='music/001.mp3'></audio>";
        Linha4 = "<div align='center'><br />Nome do Anime<br />";
        Linha5 = "<input name='caixa0' type='text' id='caixa0' size='30' maxlength='30'/><br /><br /></div></form>";
        Linha6 = "<input type='checkbox' name='itemName11' onclick='verificaChecks('11')' id='item34'/>Dica 1: (-1Pts)<input type='text' id='txt34' size='40' maxlength='40' disabled/>";
        document.getElementById("Linha1").innerHTML += Linha1 + Linha2 + Linha3 + Linha4 + Linha5 + Linha6;
    }
}

for this reason:

function mais(campo) {
    var form = '';
    for (var i = 0; i < campo; i++) {
        form+= "<form method='POST' onkeyup='validar('0')' onkeypress='validar('0')' name='anime0'>";
        form+= "<div align='center'><img id='imagem0' src='fundo.png'/></div>";
        form+= "<audio controls preload='auto' id='playTune'><source src='music/001.mp3'></audio>";
        form+= "<div align='center'><br />Nome do Anime<br />";
        form+= "<input name='caixa0' type='text' id='caixa0' size='30' maxlength='30'/><br /><br /></div></form>";
        form+= "<input type='checkbox' name='itemName11' onclick='verificaChecks('11')' id='item34'/>Dica 1: (-1Pts)<input type='text' id='txt34' size='40' maxlength='40' disabled/>";
    }
    document.getElementById("Linha1").innerHTML += form;
}

Note that the code of your question was missing 2x } code. And also pay attention to duplicated Ids that cannot be duplicated...