JS 输出消息打印在表单中的 div 标签上
Posted
技术标签:
【中文标题】JS 输出消息打印在表单中的 div 标签上【英文标题】：JS output message printed on a div tag in a form 【发布时间】：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 == "")），因此不会发生任何事情。
【参考方案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 保存到外部文件中并在页面上调用它。你猜怎么着，它就是这样工作的。再次感谢以上是关于JS 输出消息打印在表单中的 div 标签上的主要内容，如果未能解决你的问题，请参考以下文章
DropzoneJS & Laravel - 输出表单验证错误
怎么在logcat中显示system.com.print中的打印信息