Question

所以我正在开发我的第一个“真正的”JavaScript项目 - ＆gt;着名的测验应用程序:)

我通过数组传递问题和答案，我想确保允许可变数量的答案选项。为此，我使用For循环和createElement方法为数组中的每个答案添加和填充相应的HTML。在我看来，我所建造的实际上很有效。运行该函数后，我可以在正确的位置看到生成的HTML元素，并在我的控制台中显示所有相应的标记。但是，内部DIV文本不会在屏幕上呈现！非常困惑。我错过了什么？请帮忙！

我的JS代码：

<body>

<form id="form1">
</form>

<script>
    var answers = ["answer1", "answer2", "answer3", "answer4", "answer5"];

    function createRadioButtonFromArray(array) {
        var len = array.length;
        var form = document.getElementById("form1");
        for (var i = 0; i < len; i++){
            var radio = document.createElement("input");
                radio.type = "radio";
                radio.name = "choices";
                radio.class = "radioButtons";
                radio.value = i;
                radio.id = "choice" + i;
            var radioText = document.createElement("div");
                radioText.id = "c" + i;
                radioText.class = "choiceText";

            form.appendChild(radio);
            radio.appendChild(radioText);

            document.getElementById("c" + i).innerHTML=array[i];


        }
    }
</script>

</body>

这是我运行该功能后我的控制台的屏幕截图，供参考：

enter image description here

Answer 1

你的计划几乎正常，但输入元素没有内容！因此div将不会被渲染！

创建一个div，其中包含您的单选按钮和同一级别的输入文本：

var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "choices";
    radio.class = "radioButtons";
    radio.value = i;
    radio.id = "choice" + i;
var radioText = document.createElement("div");
    radioText.id = "c" + i;
    radioText.class = "choiceText";
    radioText.innerHTML = array[i];

radioText.appendChild(radio);
form.appendChild(radioText);

Answer 2

在单选按钮之后或之前添加标签。标签将让您通过单击它的文本

来检查单选按钮

var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "choices";
    radio.class = "radioButtons";
    radio.value = i;
    radio.id = "choice" + i;
var radioText = document.createElement("label");
    radioText.id = "c" + i;
    radioText.setAttribute("for", "choice" + i);
    radioText.class = "choiceText";

form.appendChild(radio);
form.appendChild(radioText);

document.getElementById("c" + i).innerHTML=array[i];

Answer 3

<input>不能包含任何DOM元素或DOM节点。但是，如果您希望将复选框与某些文字相关联，建议您将<input>与<label for="">一起使用，其中label.for是input元素的名称。要组合它们，您可以将它们放入某个容器（即<div>）：

默认情况下，在带有set属性for的标签上，会在元素上引发click事件，其name属性值与for属性值相同。这意味着您无需为<label>元素添加其他点击事件处理程序。

var checkId = 1;

var container = document.createElement("div");

var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "choices"+checkId;
    radio.class = "radioButtons";
    radio.value = i;
    radio.id = "choice" + i;
var label = document.createElement("label");
    label.innerHTML = array[i];
    // Set attribute for
    label.setAttribute("for","choices"+checkId);

//Increase counter for check element name.
checkId++;

container.appendChild(radio);
container.appendChild(label);

form.appendChild(container);

Javascript - ＆gt;尝试从阵列中动态添加单选按钮

3 个答案: