检查单选按钮值的语法

Question

我正在尝试使用 Javascript 检查无线电输入的值，这是我代码中一个函数中的 if 语句：

 if (understanding1.value == yes ){
  document.getElementById("result1Y").innerHTML = 
  document.getElementById('name1').value;
}

我在使用 if (understanding1.value == yes ) do ...

的语法时遇到问题

这是我的代码应该执行的操作：

用户输入了一些文本 > 文本的 id = "name1" 用户选择以下选项之一 > 是；有点儿;否用户点击进入按钮 > 函数 organizeUnderstanding1() 假设将输入的 name1 组织成 result1H；结果1M；结果1E；取决于他们使用无线电输入选择的内容

这是我的代码的完整版本：

 <div>
        <input type="text" id="name1">
    </div>

 <div id="understandingCheck1">
        <p>Question 1?</p>
        <input type="radio" id="yes1" name="understanding1" value="yes" required>
        <label for="yes">yes</label><br>
        <input type="radio" id="kindOf1" name="understanding1" value="kindOf">
        <label for="kinda">kind of</label><br>
        <input type="radio" id="no1" name="understanding1" value="no">
        <label for="no">no</label><br><br>
        <button onclick="hideUnderstandingCheckDiv(); organizeUnderstanding1();">Enter</button>
    </div>
    
      <div id="workDiv">
        <p>Here´s what you said YES to:</p>
        <p><span id="result1H"></span></p>
        <p>Here's what you said KIND OF to:</p>
        <p><span id="result1K"></p>  
        <p>Hereś what you said NO to:</p>
        <p><span id="result1Y"></span></p>
      </div>
    
    
      <script>
     
      
      
      function organizeUnderstanding1() {
     var understanding1 = document.querySelector('input[name = "understanding1"]:checked').value;
              if (understanding1.value == yes ){
                 document.getElementById("result1Y").innerHTML =                        document.getElementById('name1').value;
              } else if (understanding1.value == kinda ){
                document.getElementById("result1K").innerHTML =                         document.getElementById('name1').value;
              } else if (understanding1.value == no ){
                document.getElementById("result1N").innerHTML =                         document.getElementById('name1').value;
              } else {
                break;
              }
       }
       
    
   
      </script>

Answer 1

您正在检查您从未分配过的变量而不是字符串。您需要用引号将要检查字符串相等性的每个值括起来。

 <div>
        <input type="text" id="name1">
    </div>

 <div id="understandingCheck1">
        <p>Question 1?</p>
        <input type="radio" id="yes1" name="understanding1" value="yes" required>
        <label for="yes">yes</label><br>
        <input type="radio" id="kindOf1" name="understanding1" value="kindOf">
        <label for="kinda">kind of</label><br>
        <input type="radio" id="no1" name="understanding1" value="no">
        <label for="no">no</label><br><br>
        <button onclick=organizeUnderstanding1()>Enter</button>
    </div>
    
      <div id="workDiv">
        <p>Here´s what you said YES to:</p>
        <p><span id="result1Y"></span></p>
        <p>Here's what you said KIND OF to:</p>
        <p><span id="result1K"></p>  
        <p>Hereś what you said NO to:</p>
        <p><span id="result1N"></span></p>
      </div>
    
    
      <script>
     
      
      
      function organizeUnderstanding1() {
     var understanding1 = document.querySelector('input[name = "understanding1"]:checked').value;
              if (understanding1== 'yes' ){
                 document.getElementById("result1Y").innerHTML =                        document.getElementById('name1').value;
              } else if (understanding1 == 'kinda' ){
                document.getElementById("result1K").innerHTML =                         document.getElementById('name1').value;
              } else if (understanding1== 'no' ){
                document.getElementById("result1N").innerHTML =                         document.getElementById('name1').value;
              } else {
                break;
              }
       }
       
    
   
      </script>

Answer 2

 //you select all radio input 
     var selectedRadioVal;
     var radio1 = document.querySelector("#yes1")
     var radio2 = document.querySelector("#no1")
    
      //when radio1 is clicked
     radio1.onclick = function(){
     radio2.checked=false
     selectedRadioVal =radio1.value
     }
      //when radio2 is clicked
      radio2.onclick = function(){
     radio1.checked=false
     selectedRadioVal =radio2.value
     }
      //after clicking enter
      function organizeUnderstanding1() {
      //get text input value (name)
    let inputname = document.getElementById('name1').value;
     
              if (selectedRadioVal == 'yes' ){
                 document.querySelector("#result1Y").innerHTML =   inputname                     
                 selectedRadioVal=""
              }  if (selectedRadioVal == 'no' ){
                document.querySelector("#result1H").innerHTML =  inputname
                selectedRadioVal=""
              } else {
               // return;
              }
       }

<div>
        <input type="text" id="name1">
    </div>

    <div id="understandingCheck1">
        <p>Question 1?</p>
        <input type="radio" id="yes1" class="understanding1" value="yes" >
        <label for="yes">yes</label><br>
        <input type="radio" id="no1" class="understanding1" value="no">
        <label for="no">no</label><br><br>
        <button onclick=organizeUnderstanding1()>Enter</button>
    </div>
    
      <div id="workDiv">
        <p>Here´s what you said YES to:</p>
        <p id="result1Y"></p>
        <p>Hereś what you said NO to:</p>
        <p id="result1H"></p>
      </div>

Answer 3

您的问题以此代码块开头：

 if (understanding1.value == yes ){
  document.getElementById("result1Y").innerHTML = 
  document.getElementById('name1').value;
}

这试图将 understanding1.value 的值与名为 yes 的变量的值进行比较。你要做的是比较 understanding1.value 和 字符串 'yes' 的值，所以你需要在它周围添加引号：

 if (understanding1.value == 'yes'){
  ...
}

我想这回答了你的问题。但是还有一些其他的事情你应该改变：

修复代码中的其他一些错误（使用 understanding1 而不是 understanding1.value 并使用正确的跨度 ID（result1H、result1K 和 result1Y而不是 result1Y、result1K 和 result1N。
使用 textContent 而不是 innerValue。否则，该值将被解释为 HTML（这就是名称 innerHTML 包含“HTML”的原因）。使用您的代码，如果用户在文本框中输入 <script>doSomethingEvil();</script> 并单击按钮，那么它将执行函数 doSomethingEvil().
摆脱那个 else/break 位——它实际上没有做任何事情。
将所有这些 if 和 else if 语句转换为 switch 语句。
通过修复缩进和其他间距使您的代码更易于阅读。
在执行任何其他操作之前检查用户是否实际输入了有效输入。我之所以这样说是因为这一行： <button onclick="hideUnderstandingCheckDiv(); organizeUnderstanding1();">Enter</button> 显然，一旦用户单击按钮，它就应该隐藏所有输入。由于不清楚页面应该如何整体工作，我没有完成这部分。

完整代码：

<div>
    <input type="text" id="name1">
</div>

<div id="understandingCheck1">
    <p>Question 1?</p>
    <input type="radio" id="yes1" name="understanding1" value="yes" required>
    <label for="yes">yes</label><br>
    <input type="radio" id="kindOf1" name="understanding1" value="kindOf">
    <label for="kinda">kind of</label><br>
    <input type="radio" id="no1" name="understanding1" value="no">
    <label for="no">no</label><br><br>
    <button onclick="hideUnderstandingCheckDiv(); organizeUnderstanding1();">Enter</button>
</div>

<div id="workDiv">
    <p>Here´s what you said YES to:</p>
    <p><span id="result1H"></span></p>
    <p>Here's what you said KIND OF to:</p>
    <p><span id="result1K"></p>  
    <p>Hereś what you said NO to:</p>
    <p><span id="result1Y"></span></p>
</div>

<script>
    function organizeUnderstanding1() {
        var understanding1 = document.querySelector('input[name = "understanding1"]:checked').value;
        
        switch (understanding1.value {
            case 'yes':
                document.getElementById("result1H").textContent = document.getElementById('name1').value;
                break;
            case 'kinda':
                document.getElementById("result1K").textContent = document.getElementById('name1').value;
                break;
            case 'no':
                document.getElementById("result1Y").textContent = document.getElementById('name1').value;
                break;
        }
    }
</script>

我只想说：令我震惊的是没有其他人对 innerHTML 的使用发表评论。这似乎是经验丰富的开发人员需要在每次看到它时发表评论的初学者陷阱和严重的安全漏洞。

检查单选按钮值的语法

Syntax for checking value of radio button

javascript

input

radio