问题描述
我试图用Javascript检查单选输入的值，这是我代码中函数中的if语句：
if (understanding1.value == yes ){
document.getElementById("result1Y").innerHTML =
document.getElementById('name1').value;
}
我在if（understanding1.value == yes）的语法上遇到麻烦...
这是我的代码应该做的：
用户输入一些文本>文本具有id =“ name1” 用户选择以下选项之一>是；有点儿;否用户单击输入按钮> 函数organizationUnderstanding1（）假定将输入名称1组织为两个result1H； result1M; result1E;取决于他们选择的无线电输入
这是我的代码的完整版本：
<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>
解决方法
您正在检查从未分配的变量，而不是字符串。您需要在要检查字符串相等性的每个值周围加上引号。
<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>
//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>,
您的问题从以下代码块开始：
if (understanding1.value == yes ){
document.getElementById("result1Y").innerHTML =
document.getElementById('name1').value;
}
这试图将understanding1.value的值与称为yes的变量的值进行比较。您要做的是将understanding1.value的值与 string 'yes'进行比较，因此需要在其周围添加引号：
if (understanding1.value == 'yes'){
...
}
我认为这可以回答您的问题。但是，您还需要更改其他一些内容：
- 修复代码中的其他一些错误（使用
understanding1代替understanding1.value，并使用正确的跨度ID（{{1}，result1H和result1K代替分别为result1Y，result1Y和result1K。 - 使用
textContent代替result1N。否则，该值将被解释为HTML（这就是名称innerValue包含“ HTML”的原因）。使用用户的代码，如果用户在文本框中输入innerHTML，然后单击按钮，它将执行功能<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>
的使用发表评论。这似乎是一种初学者陷阱-以及严重的安全漏洞-经验丰富的开发人员 每次看到该评论时都要发表评论。