Question

我一直在尝试制作一个简单的剧本，但是我被卡住了。它应该像这样工作：用户点击ADD button添加字段以创建问题，之后，用户可以点击ADD ONE OPTION button，以便在问题下方创建其他空白文字。

它不起作用。即使我使ADD按钮工作，不知何故，另一个按钮停止，我得到像无法调用方法'appendChild'的null。

这是代码：

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

这是fiddle 检查其工作正常。

已更新：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

当尝试添加onclick事件时，您并不是真的将该函数作为处理程序，而是该函数的执行结果（在您的情况下没有任何内容）。这可以解决您的问题：

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

Answer 3

看起来您收到错误是因为您尝试使用ID“radiodown”定位div，但这似乎不存在。

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

3 个答案: