使用 required 属性动态生成单选按钮

Question

类似问题的答案：How to use the "required" attribute with a "radio" input field 在这种情况下似乎不起作用。我正在改编通过无线电提供的多项选择测验 buttons.The 测验在外部 js 文件中内置了单选按钮。

工作原理

测验是一种性格测试，通过回答 20 个问题（4 组，每组 5 个问题）你可以获得分数（没有正确答案）。单击“提交答案”按钮会出现第一组之后的组。

这些点分为 3 个波段：0 到 22、23 到 43、44 到 65。每个波段都附有说明和图片。

脚本工作正常，唯一的问题是单选按钮没有“必需”属性。因此，如果一个人在没有选择答案的情况下点击，他仍然会得到 0 分。

我试过几次使单选按钮成为必需的，如本例所示： https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_required

HTML 页面如下所示：

HTML

<p id="test_status"></p>

<div id="box">
<p id="test"></p>
<p id = "after"></p>
<p id = "message"></p>
<p><img id = "picture"></p>
</div>

仅此而已。

脚本

 / setup initial vars

    var pos = 0;
    var score_all = 0;
      var score = 0;
    var test, test_status, question, choice, choices, chA, chB, chC, chD, chE;
    var l_messagge = "";
    var picture = "";
    var tipo = "";

    // this is a multidimensional array with 4 inner array elements with 5 elements inside them
    var questions = [
      {
          question: "question1",
          a: "answer1",
          b: "answer2",
          c: "answer3",
          d: "answer4",
          e: "answer5",
      score_a: 1,
      score_b: 4,
          score_c: 3,
          score_d: 2,
      score_e: 0
                },
// three more questions follow.

];

    // create the get function

     function get(x){
        return document.getElementById(x);
    }

        // this function renders a question for display on the page
    function renderQuestion(){
    test = get("test");

    //test.innerHTML = questions.length;
      if(pos >= questions.length){
    opis();
    document.getElementById("after").style.visibility = "visible";
     //   get("test_status").innerHTML = "Test completed";
        get("test_status").innerHTML = score_all;
        test.innerHTML = "<h2> "+l_messagge+"</h2>";
        document.getElementById("message").innerHTML = tipo;
    document.getElementById("picture").src = picture;
    
       // resets the variable to allow users to restart the test
        pos = 0;
        score_all= 0;
        // stops rest of render Question function running when test is completed
        return false;
      }
      get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
              get("test_status").innerHTML = score_all;
      question = questions[pos].question;
      chA = questions[pos].a;
      chB = questions[pos].b;
      chC = questions[pos].c;
      chD = questions[pos].d;
      chE = questions[pos].e;
      // display the question
      test.innerHTML = "<h3>"+question+"</h3>";
      
    // display the answer options
    // the += appends to the data we started on the line above
test.innerHTML += "<label> <input type='radio'  name='choices' value='A'> "+chA+"</label><br>";
      test.innerHTML += "<label> <input type='radio' name='choices' value='B' "+chB+"</label><br>";
      test.innerHTML += "<label> <input type='radio' name='choices' value='C'> "+chC+"</label><br><br>";
      test.innerHTML += "<label> <input type='radio' name='choices' value='D'> "+chD+"</label><br>";
      test.innerHTML += "<label> <input type='radio' name='choices' value='E'> "+chE+"</label><br><br>";
      test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
    }
         
// Create a function to check the answers
            function checkAnswer(){
      // use getElementsByName because we have an array which it will loop through
      choices = document.getElementsByName("choices");
      for(var i=0; i<choices.length; i++){
        if(choices[i].checked){
          choice = choices[i].value;   // będzie 'A', 'B' lub 'C'
      if (choice == 'A' ) {score = questions[pos].score_a;}
      else if (choice == 'B' ) {score = questions[pos].score_b;}
      else if (choice == 'C' ) {score = questions[pos].score_c;}
      else if (choice == 'D' ) {score = questions[pos].score_d;}
        else
        {score = questions[pos].score_e;};
        }
      }
      // checks if answer matches the correct choice
      
        score_all = score_all + score;
      
      // changes position of which character user is on
      pos++;
      // then the renderQuestion function runs again to go to next question
      renderQuestion();
    }
  
  function opis(){
     if (score_all >=  0 && score_all < 4) {
         picture = "img/not.jpg";
         l_messagge = "Message1";
         tipo = "Tipo1";
      }
        else if (score_all >=  4 && score_all < 7  ) {
          picture = "img/gorg.jpg";
          l_messagge = "Tipo2,";  
      }
        else if (score_all >=  7 && score_all < 10  ) {
          picture = "img/blip.jpg";
          l_messagge = "Tipo3";  
      }
        else if (score_all >=  10 && score_all < 13  ) {
          picture = "img/plap.jpg";
          l_messagge = "Tipo4";  
      }
      else
      {
         picture = "img/tik.jpg";
         l_messagge = "message5" ;
      }
    return;
  }
        // Add event listener to call renderQuestion on page load event
    window.addEventListener("load", renderQuestion);

但没有结果。

问题得到回复：

var myStuff = `
<label> <input type='radio' id='oRadA' name='choices' value='A' required='required'> ${chA}</label><br>
<label> <input type='radio' id='oRadB' name='choices' value='B'> ${chB}</label><br>
<label> <input type='radio' id='oRadC' name='choices' value='C'> ${chC}</label><br>
<label> <input type='radio' id='oRadD' name='choices' value='D'> ${chD}</label><br>
<label> <input type='radio' id='oRadE' name='choices' value='E'> ${chE}</label><br>
`;
test.innerHTML = myStuff;

但我做不到work.When我转录了它，单选按钮和答案都消失了，只有问题仍然可见..

另一种解决方案是将单选按钮直接插入html页面，但我也应该转移相关的javascrip部分，我不知道该怎么做。

如您所见，我对 Javascript 知之甚少，有人可以帮助我吗？感谢关注

Answer 1

请记住，两个元素不能具有相同的 ID （坏事发生）。您可能 不需要 ID 属性（我不知道您的 js 的其余部分中有什么） - 无论如何表单不需要它们（表单仅使用 name=和 value= 个元素）。

你应该只需要一个 required 属性标签（其他的不会造成伤害但不需要） - 但有时我需要写 required="required" 而不仅仅是 required.

最后，我使用现代 JS template literals 使代码更容易 read/modify。

如果这不能解决您的问题，请告诉我，我们会继续进行故障排除。

var myStuff = `
<label> <input type='radio' id='oRadA' name='choices' value='A' required='required'> ${chA}</label><br>
<label> <input type='radio' id='oRadB' name='choices' value='B'> ${chB}</label><br>
<label> <input type='radio' id='oRadC' name='choices' value='C'> ${chC}</label><br>
<label> <input type='radio' id='oRadD' name='choices' value='D'> ${chD}</label><br>
<label> <input type='radio' id='oRadE' name='choices' value='E'> ${chE}</label><br>
`;
test.innerHTML = myStuff;

Answer 2

问题

在我妻子的帮助下，我使用我称之为 Lateral Thinking 的示例解决了 select 测试问题答案之一的问题。

也就是说，不对 selection 的强制性进行操作，而是对其缺乏的影响进行操作。简而言之：如果您没有 select 答案，您就不会继续，也不需要任何“required”。

如何

我将初始分数值设置为 10（第一个问题或以后的分数无法达到），它作为一个块运行。

 score = 10;

如果用户 select 是第一个答案，他可以达到的最大值是 4，然后转到下一个问题。对于每个问题，用户都有“分数 = 10”，并且必须通过单击答案来降低分数。

if (score <10) {
score_all = score_all + score;
else {// rendering error message
get ("message"). innerHTML = "<i>" + "Please select your answer." + "</i>";
  }
}

selected 答案总结在：

score_all = score_all + score;

使用 required 属性动态生成单选按钮

Using the required attribute with dynamically generating radio-buttons

html

javascript

css

radio-button

required