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

【问题标题】：JavaScript button onclick function using DOM and appendChild使用 DOM 和 appendChild 的 JavaScript 按钮 onclick 函数
【发布时间】：2014-04-02 10:32:07
【问题描述】：

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

This is the FIDDLE

它不工作。即使我让 ADD 按钮工作，不知何故，另一个按钮停止了，我得到了类似 Cannot call method 'appendChild' of 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);
}

【问题讨论】：

标签： javascript html dom button

【解决方案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);
}

【讨论】：

是的，我也试过了，但是这里还有一个错误
请更新 FIDDLE。我按照你说的做了，但它不再起作用了
没有任何改变。该按钮不再起作用。试试我的 FIDDLE
你的小提琴没有我的代码，应用我的代码后，我没有看到你的小提琴有任何错误
很高兴，我正在更新代码以帮助您进行下一次函数调用。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您似乎遇到了错误，因为您尝试使用 id 为“radiodown”的 div 定位，但这似乎不存在。

【讨论】：