javascript - 使用 JS 为输入的单选类型组设置相同的属性名称

Question

我正在尝试用 JS 动态构建类似的东西:

<p class = "questions">La norme HTML5 ne nécessite pas de guillemets autour des valeurs d'attribut.</p>
<input type = "radio" id = "sp" name = "question1" value = "true"> Vrai<br>
<input type = "radio" id = "sp" name = "question1" value = "false"> Faux<br>

<p class = "questions">L'élément &lt;div&gt; est un élément non sémantique.</p>
<input type = "radio" id = "sp" name = "question2" value = "true"> Vrai<br>
<input type = "radio" id = "sp" name = "question2" value = "false"> Faux<br>

但是，在控制台中，我的代码目前看起来更像是这样:

<form id="quizz">
<p class="questions">La norme HTML5 ne nécessite pas de guillemets autour des valeurs d'attribut.
<input type="radio" id="sp" value="true" name="vrai">
<input type="radio" id="sp" value="false" name="faux">
</p>
<p class="questions">L'élément &lt;div&gt; est un élément non sémantique.
<input type="radio" id="sp" value="true" name="vrai">
<input type="radio" id="sp" value="false" name="faux"></p>

显然我当前的 JS 代码是丑陋的:

questions = questionnaire.length;
newForm = document.createElement("form");
newForm.id = "quizz";
newTitle = document.createElement("h1");
for (i = 0; i < questions; i++) {

newParagraph = document.createElement("p");
newParagraph.classList = "questions";

newInput = document.createElement("input");
newInput.type = "radio";
newInput.id = "sp";
newInput.value = "true";
newInput.name = "vrai";

newInput1 = document.createElement("input");
newInput1.type = "radio";
newInput1.id = "sp";
newInput1.value = "false";
newInput1.name = "faux";

我尝试过在循环中创建一个循环以及不同的切片和 setattribute 方法，但这些方法似乎都不起作用，甚至对我来说都没有意义。

很抱歉提出了菜鸟问题，并非常感谢您的帮助。

Answer 1

这有助于为每个问题提供两个以上可能的答案:

function makeForm() {

const newForm = document.createElement( "form" );
document.querySelector(".container").appendChild(newForm);

// Instead of .map() you can use a for loop through the questions
questions.map((question, qIndex) => {

    // Each question with the radios is a p element
    const questionElement = document.createElement("p");
    // Set the question text
    questionElement.innerText = question;

    // Loop through the different possible answers. 
    // Two items for the two possible answers,
    // in each of two, [0] is value, [1] is the text in french
    [['true', 'Vrai'], ['false', 'Faux']].map(answer => {

        const radioElement = document.createElement( "input" );

        radioElement.setAttribute("type", "radio");
        // id has 'sp', question index and true or false
        radioElement.setAttribute("id", `sp-${qIndex}-${answer[0]}`);
        // name is 'q' and question index, it has to be the same for each question
        radioElement.setAttribute("name", `q${qIndex}`);
        // value is true or false, the string you want when form is submitted
        radioElement.setAttribute( "value", `${ answer[ 0 ]}`);

        // Create label connected to each answer
        const label = document.createElement('label');
        // Needs a for attribute to connect id to the id of this radio
        label.setAttribute( "for", `sp-${ qIndex }-${ answer[ 0 ]}`);
        // Label text is 'vrai' or 'faux'
        label.innerText = answer[1];

        questionElement.appendChild(radioElement);
        questionElement.appendChild(label);

    });

    newForm.appendChild(questionElement);

});

您可以通过 form[question] 获取提交结果，其中 form 是元素，question 是 "q0"、“q1” 在 for 循环等中