使用DOM和appendChild的JavaScript按钮onclick函数

Question

I've been trying to make a simple script, but I got stuck. It should work like this: User click the ADD button to add field for creating question, after that, user can click ADD ONE OPTION button , in order to create additional blank textareas below the question.

This is the FIDDLE

It's not working. Even I make an ADD button work, somehow, the other button stops, I got smth like Cannot call method 'appendChild' of null.

This is the code:

HTML:

<input type="submit" value="ADD" onclick="addquestion();" />
<br/><br/>
<div id="below"></div><br/>

JAVASCRIPT:

n=1;
function addquestion() {
        var textarea = document.createElement("textarea");
        textarea.name = "question[" + n + "]";
        var addone = document.createElement("input");
        addone.type = "button";
        addone.value = "Add one option";
        addone.onclick = "insertbelow("+n+")";
        var div = document.createElement("div");
        div.innerHTML = n + ". Question:  <br />" + textarea.outerHTML + "<br />" + addone.outerHTML + "<br /><div id=\"radiodown"+n+"\" ></div><hr/><br/>";
        document.getElementById("below").appendChild(div);
        n++;
}

function insertbelow(index) {
    var option = document.createElement("textarea");
    option.name = "rad["+index+"]";
    var optiondiv = document.createElement("div");
    optiondiv.innerHTML = option.outerHTML + "<br/>";
    document.getElementById("radiodown"+index).appendChild(optiondiv);
}

Answer 1

Here is fiddle check out its working fine.

Updated: Javascript

n=1;
function addquestion() {
    var textarea = document.createElement("textarea");
    textarea.name = "question[" + n + "]";
    var addone = document.createElement("input");
    addone.type = "button";
    addone.value = "Add one option";
    addone.id="id_"+n;

    var div = document.createElement("div");
    div.innerHTML = n + ". Question:  <br />" + textarea.outerHTML + "<br />" + addone.outerHTML + "<br /><div id=\"radiodown"+n+"\" ></div><hr/><br/>";
    document.getElementById("below").appendChild(div);

    var btn=document.getElementById("id_"+n);
    if(btn.addEventListener){
        btn.addEventListener('click', function() { insertbelow(this)});    
    } else if(btn.attachEvent){ // IE < 9 :(
        btn.attachEvent('onclick', function() { insertbelow(this)});
    }
    n++;
}

function insertbelow(index) {
    index=index.id.split("_")[1];
    var option = document.createElement("textarea");
    option.name = "rad["+index+"]";
    var optiondiv = document.createElement("div");
    optiondiv.innerHTML = option.outerHTML + "<br/>";
    document.getElementById("radiodown"+index).appendChild(optiondiv);
}

Answer 2

When trying to add the onclick event you don't really give the function as handler, but the result of the execution of the function (nothing in your case). This can solve your issue:

addone.onclick = function() { insertbelow(n) };

Answer 3

您似乎收到了错误消息，因为您尝试定位ID为“ radiodown”的div，但这似乎不存在。