JS 输出消息打印在表单中的 div 标签上答案

【问题标题】：JS output message printed on a div tag in a formJS 输出消息打印在表单中的 div 标签上
【发布时间】：2018-10-18 14:17:26
【问题描述】：

我想，我正在为一些非常简单的事情而苦苦挣扎。我有一个表单，当用户选择他们的答案时，我想在 DIV 标记内出现一条消息。

我的代码示例在这里：

    function check(){
 		//var display_answer = document.myform.answer.value;
    
    var q1 = document.myform.q1.value;
    var q2 = document.myform.q2.value;
    
    if(q1 == "a" && q2 == "a"){
  	document.getElementById("div").innerHTML= "Green!";
    }
    if(q1 == "a" && q2 == "b"){
    		document.getElementById("div").innerHTML = "Red!";
    }
    if(q1 == "b" && q2 == "a"){
    		document.getElementById("div").innerHTML = "Yellow!";
    }
    if(q1 == "b" && q2 == "b"){
    document.getElementById("div").innerHTML = "Blue!";
    }
}

    <!DOCTYPE html>
    <html>
    <head>
    <title>Food Quiz</title>
    </head>
    <body>
    <form name="myform">
    Question 1: Question...?
    <input type="radio" name="q1" value="a"> Answer A </br>
    <input type="radio" name="q1" value="b"> Answer B </br></br>
    
    
    Question 2: Question...?
    <input type="radio" name="q2" value="a"> Answer A </br>
    <input type="radio" name="q2" value="b"> Answer B </br></br>
    </br>
    </br>
    </br>
    </br>
    <input type="button" value="submit" onclick="check()">
    </br>
    </br>
    </form>
    
    <p>
    Results:
    </p>
    </br>
    <div style="background-color:lightblue" id="div" name="answer">
    </div>
    
    
    </body>
    </html>

事实是，我没有得到任何结果。当用户选择 2 个给定答案的组合（每个问题一个）时，它会得到颜色结果，打印在 id=div 的 DIV 标签上。

对这里出了什么问题有任何想法吗？谢谢。

【问题讨论】：

console.log() 是你的朋友
当我将您的代码添加到 snipplet 时，对我来说似乎工作正常。该 HTML 中包含的代码在哪里？
您的代码有效（对于问题 2 有效），但您的 HTML 有一些无效语法 </br> 应该只是 <br> 和 .innerHTML 用于获取/设置包含 HTML 的字符串他们。如果字符串没有，请使用.textContent。
我们很难帮助您做出“正确”的行为，因为您的代码会讨论“答案 a”和“答案 b”并以颜色进行响应。我们无法理解您在选择各种按钮组合时应该显示什么的逻辑。
当你说“我没有得到任何结果”时，你是什么意思？在您的 check() 逻辑中，您的条件仅在为两者都选择了值的情况下处理。如果您没有选择其中一组单选按钮，则该值将为空白 - 但您没有检查空白（例如：if (q1 == "")），因此不会发生任何事情。

标签： javascript html forms innerhtml

【解决方案1】：

我稍微更改了您的代码 sn-p 并且这有效。基本上，我在表格中添加了method="post"。我将提交按钮类型更改为type="submit"。这是HTML Forms 的一个很好的资源。为了防止浏览器操作，我更改了提交按钮onclick="check(); return false;" 的onclick 操作。这是一个很好的资源：@987654322@

我还将您的 div 消息的 id 更改为 id="resultMessage"。您通常需要一个唯一的 ID。对于 JavaScript sn-p，我只创建了一个变量来引用 div 元素并在 if 语句中使用该变量。

是的，console.log() 是你最好的朋友！

function check() {
  var q1 = document.myform.q1.value;
  var q2 = document.myform.q2.value;
  
  var divResult = document.getElementById("resultMessage");

  if (q1 == "a" && q2 == "a") {
    divResult.innerHTML = "Green!";
  }
  if (q1 == "a" && q2 == "b") {
    divResult.innerHTML = "Red!";
  }
  if (q1 == "b" && q2 == "a") {
    divResult.innerHTML = "Yellow!";
  }
  if (q1 == "b" && q2 == "b") {
    divResult.innerHTML = "Blue!";
  }
}

<!DOCTYPE html>
<html>

  <head>
    <title>Food Quiz</title>
  </head>

  <body>
    <form name="myform" method="post">
      <label for="q1">Question 1: Question...?</label>
      <input type="radio" name="q1" value="a"> Answer A </br>
      <input type="radio" name="q1" value="b"> Answer B </br>
      </br>


      <label for="q2">Question 2: Question...?</label>
      <input type="radio" name="q2" value="a"> Answer A </br>
      <input type="radio" name="q2" value="b"> Answer B </br>
      </br>
      </br>
      </br>
      </br>
      </br>
      <input type="submit" value="submit" onclick="check(); return false;">
      </br>
      </br>
    </form>

    <p>
      Results:
    </p>
    </br>
    <div style="background-color:lightblue" id="resultMessage" name="answer">
    </div>

  </body>

</html>

【讨论】：

感谢@John Bullington 的有用帮助和他给我的方法表格指南（我完全忘记了）。 console.log() 确实是最有用的工具！我也想感谢 Scott Marcus 的帮助。以及所有指出我错误的人！我成功地运行了这个。由于 Wordpress 在其正文内容上的 JS 脚本有点棘手。我使用上面的 HTML 代码并将 JS 保存到外部文件中并在页面上调用它。你猜怎么着，它就是这样工作的。再次感谢