Form's automatic generator with innerHTML

Navigation
0

I have a browser game ready. It is a game that only puts the answer in a form, if it is right, earn points, change an image, block the text box and a few more 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. Then the system will already create these 60 forms automatic when der load on the page.

I was trying to implement as 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 that way and it was not. The text box works. But no function in JS works. As onkeypress='validar('0')' nem onclick='verificaChecks('11')'

I made a test by putting the form already in the body and only adding% with% of the rest of the code. Hence the form function works, but the checklist does not yet, probably because it is still being inserted by innerHTML . I just did this for testing because I need the form to be created in innerHTML .

The impression given is that when some content is added, form's or checklists with functions in innerHTML by div functions do not find path to file innerHTML as out of scope.

    
asked by anonymous 09.11.2014 / 13:13

1 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 custom ...

It's okay to add code this way. Better said: adding this way should not make the error you have, but there are better ways to do this ...

An example of the same functionality: link

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 = 'checkChecks (\ "11 \")'. I have doubts: why not just onclick='verificaChecks(11)' ? in number format instead of string?

Here are some other suggestions that I imagine solve / help the problem too.

Once you're using jQuery, instead: 

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 this and it works for 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 substitute: 

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: 

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;
}

Please note that your question code was missing 2x } in the code. Also pay attention to duplicate IDs that can not be duplicated ...

    
09.11.2014 / 23:06
file_exists to verify news What is the difference between WCF project types?