Javascript queryselector为输入字段返回不正确的值_Javascript_Html

Javascript queryselector为输入字段返回不正确的值
javascript html
Javascript queryselector为输入字段返回不正确的值,javascript,html,Javascript,Html,代码：无标题文件函数显示问题（a，忽略）{ var b=a-1； var currentInput=''； var questions=document.getElementsByClassName（“问题持有人”）； var showRequired=document.getElementById（“requiredMessage”）； if（document.querySelector（'input.input'+b）！==null）{ var currentInput=documen
代码：

无标题文件
函数显示问题（a，忽略）{
var b=a-1；
var currentInput=''；
var questions=document.getElementsByClassName（“问题持有人”）；
var showRequired=document.getElementById（“requiredMessage”）；
if（document.querySelector（'input.input'+b）！==null）{
var currentInput=document.querySelector（'input.input'+b）.value；
}
//检查问题是否应忽略输入
如果（ignore==1）{//yes，忽略输入，继续下一个问题
console.log（“路径1”）；
showRequired.style.display=“无”；
对于（var i=0；i
你姓什么？
是/是
无/无
使用：选中
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script type="text/javascript">
function displayquestion(a, ignore){
    var b = a-1;
    var currentInput = '';
    var questions = document.getElementsByClassName("questionholder");
    var showRequired = document.getElementById("requiredMessage");

    if (document.querySelector('input.input' + b) !== null) {
        var currentInput = document.querySelector('input.input' + b).value;
    }

    // Check if question should ignore inputs
    if (ignore == 1) { // yes, ignore the inputs so move on to next question
        console.log("path 1");
        showRequired.style.display = "none";        

        for(var i=0; i < questions.length; i++) {           
            questions[i].style.display = "none";    
        }

        var nextQuestion = document.getElementById("question" + a);

        if(nextQuestion !== null) {
            nextQuestion.style.display = "block";
        }   
    } else { //no, don't ignore the inputs
        if (currentInput == '') { // the input is blank so show error
            console.log("path 2");

            showRequired.style.display = "block";
        } else { // the input is not blank so move on to next question
            console.log("currentInput = " + currentInput);

            showRequired.style.display = "none";        

            for(var i=0; i < questions.length; i++) {           
                questions[i].style.display = "none";    
            }

            var nextQuestion = document.getElementById("question" + a);

            if(nextQuestion !== null) {
                nextQuestion.style.display = "block";
            }   
        }
    }
}   
</script>
</head>

<body>  
<div id="requiredMessage" style="display:none"><p>This field is required.</p></div>

<form id="TheForm" style="display:block;">
<div data-toggle="buttons" class="questionholder multiplechoice" id="question10" style="display:block">
    <h5>Do you have a surname?</h5>
    <input class="input10" type="radio" id="yes" name="sn" value="yes"><label for="relPPTsnyes"><p class="radioChoice">Yes / Oui</p></label>
    <input class="input10" type="radio" id="no" name="sn" value="no"><label for="relPPTsnno"><p class="radioChoice">No / Non</p></label><br>        
    <a class="text2button radio" onclick="displayquestion(11)">Next</a>
</div>
</form>
</body>
</html>

用途：勾选
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script type="text/javascript">
function displayquestion(a, ignore){
    var b = a-1;
    var currentInput = '';
    var questions = document.getElementsByClassName("questionholder");
    var showRequired = document.getElementById("requiredMessage");

    if (document.querySelector('input.input' + b) !== null) {
        var currentInput = document.querySelector('input.input' + b).value;
    }

    // Check if question should ignore inputs
    if (ignore == 1) { // yes, ignore the inputs so move on to next question
        console.log("path 1");
        showRequired.style.display = "none";        

        for(var i=0; i < questions.length; i++) {           
            questions[i].style.display = "none";    
        }

        var nextQuestion = document.getElementById("question" + a);

        if(nextQuestion !== null) {
            nextQuestion.style.display = "block";
        }   
    } else { //no, don't ignore the inputs
        if (currentInput == '') { // the input is blank so show error
            console.log("path 2");

            showRequired.style.display = "block";
        } else { // the input is not blank so move on to next question
            console.log("currentInput = " + currentInput);

            showRequired.style.display = "none";        

            for(var i=0; i < questions.length; i++) {           
                questions[i].style.display = "none";    
            }

            var nextQuestion = document.getElementById("question" + a);

            if(nextQuestion !== null) {
                nextQuestion.style.display = "block";
            }   
        }
    }
}   
</script>
</head>

<body>  
<div id="requiredMessage" style="display:none"><p>This field is required.</p></div>

<form id="TheForm" style="display:block;">
<div data-toggle="buttons" class="questionholder multiplechoice" id="question10" style="display:block">
    <h5>Do you have a surname?</h5>
    <input class="input10" type="radio" id="yes" name="sn" value="yes"><label for="relPPTsnyes"><p class="radioChoice">Yes / Oui</p></label>
    <input class="input10" type="radio" id="no" name="sn" value="no"><label for="relPPTsnno"><p class="radioChoice">No / Non</p></label><br>        
    <a class="text2button radio" onclick="displayquestion(11)">Next</a>
</div>
</form>
</body>
</html>

您没有检查收音机是否被选中。因此，document.querySelector
返回带有value=“yes”
use is querySelector的第一个收音机
var currentInput = document.querySelectorAll('input.input' + b + ':checked").value;

您没有检查收音机是否被选中。因此，document.querySelector
返回带有value=“yes”
use is querySelector的第一个收音机
var currentInput = document.querySelectorAll('input.input' + b + ':checked").value;

收音机和复选框总是返回其值。

您必须做的第一件事是检查是否选择了其中一项，然后获取所选项的值
if (document.querySelector('input.input' + b + ':checked') !== null) {
        currentInput = document.querySelector('input.input' + b + ':checked').value;
        console.log(currentInput)
    }

另外，querySelector（）
可以直接返回所选的一个，而无需循环节点列表
const inputs = document.querySelectorAll('input[type=checkbox]') // or type=radio
for (const input of inputs)
{
    if (input.checked)
    {
        console.log(input.value)
    }
}

收音机和复选框总是返回其值。

您必须做的第一件事是检查是否选择了其中一项，然后获取所选项的值
if (document.querySelector('input.input' + b + ':checked') !== null) {
        currentInput = document.querySelector('input.input' + b + ':checked').value;
        console.log(currentInput)
    }

另外，querySelector（）
可以直接返回所选的一个，而无需循环节点列表
const inputs = document.querySelectorAll('input[type=checkbox]') // or type=radio
for (const input of inputs)
{
    if (input.checked)
    {
        console.log(input.value)
    }
}

我的解决方案：
const input = document.querySelector('input[type=checkbox]:checked') // or type=radio
if (input)
{
    console.log(input.value)
}

我的解决方案：
const input = document.querySelector('input[type=checkbox]:checked') // or type=radio
if (input)
{
    console.log(input.value)
}

你需要看看其中一个是否被选中…我该怎么做？你需要看看其中一个是否被选中…我该怎么做？这里的问题是如果没有选中任何单选按钮，我收到一个错误：未捕获的TypeError:无法读取的属性“value”null@Sweepster它不能得到错误，因为您首先检查它的notnull
是否为if
条件。然后访问它的值。您提供的代码工作正常，但您的代码仅在检查的输入不为null时进行检查。这个函数也需要在文本输入上运行，因此我需要首先检查输入是文本还是无线电输入，这是返回错误小提琴上的错误发生是因为在第14行中检查了'input.input'+b
（if（document.querySelector（'input.input'+b）！==null）
）但是在第15行中，您得到了'input.input'+b+'：checked'
。只需在if中添加”：checked“
。这里的问题是，如果没有选择任何单选按钮，我会得到一个错误：Uncaught TypeError:无法读取的属性“value”null@Sweepster它不能得到错误，因为您首先检查它的notnull
是否为if
条件。然后访问它的值。您提供的代码工作正常，但您的代码仅在检查的输入不为null时进行检查。这个函数也需要在文本输入上运行，因此我需要首先检查输入是文本还是无线电输入，这是返回错误小提琴上的错误发生是因为在第14行中检查了'input.input'+b
（if（document.querySelector（'input.input'+b）！==null）
）但是在第15行中，您得到了'input.input'+b+'：checked'
。只需在if.console.log（document.querySelector（'input[type=radio]'）==true）中添加'：选中“
”；对我来说是假的。如何检查无线电输入是否存在？如果相等性检查返回false，则意味着querySelector（）
无法找到与提供的选择器匹配的元素。这意味着元素不存在。如果您的选择器是input[type=checkbox]：选中的
，则不存在选中的复选框。如果选择了yes或no，我会得到正确的值，但如果没有选择，我会得到一个errorconsole.log（document.querySelector（'input[type=radio]'）==true）；对我来说是假的。如何检查无线电输入是否存在？如果相等性检查返回false，则意味着querySelector（）
无法找到与提供的选择器匹配的元素。这意味着元素不存在。如果您的选择器选中了输入[类型=复选框]：则不存在选中的复选框。如果选择了“是”或“否”，我将获得正确的值，但如果未选择任何值，我将获得错误。这仅在选中其中一个单选按钮时有效。如果没有一个被选中，我会得到一个错误。这只在选中一个单选按钮时有效。如果没有一个被检查，我会得到一个错误