queryselector 为输入字段返回不正确的值答案

【问题标题】：queryselector is returning incorrect value for input fieldqueryselector 为输入字段返回不正确的值
【发布时间】：2019-02-07 05:42:34
【问题描述】：

代码：

<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>

我的 javascript 函数有问题，该函数可用于输入文本字段，但不能用于单选按钮。

简而言之，我有一个包含一对单选按钮和一个下一步按钮的 div。当用户点击下一步时，函数 displayquestion(a) 触发。

该函数检查 currentInput 以查看输入是否为空白。如果为空，则显示错误消息。如果不为空，则隐藏div。

但是，对于单选按钮，无论未选择任何内容、选择否或选择是，currentInput 始终返回“yes”。由于它不是空白的，所以它隐藏了 div。

预期结果应该是在用户做出选择之前一直显示错误消息。只有当用户点击下一步时，它才会隐藏 div。

所以我的问题是，是什么导致了我的问题以及如何解决？

jsfiddle

【问题讨论】：

那么你需要看看其中一个是否被选中...
我该怎么做呢？

标签： javascript html

【解决方案1】：

使用 :checked

var currentInput = document.querySelectorAll('input.input' + b + ':checked").value;

【讨论】：

这仅在选中其中一个单选按钮时才有效。如果没有检查它们，我会收到错误

【解决方案2】：

收音机和复选框总是返回它们的值。
您必须做的第一件事是检查其中一个是否被选中，然后获取选中的值。

const inputs = document.querySelectorAll('input[type=checkbox]') // or type=radio
for (const input of inputs)
{
    if (input.checked)
    {
        console.log(input.value)
    }
}

另外querySelector()可以直接返回选中的那个，不需要循环节点列表。

const input = document.querySelector('input[type=checkbox]:checked') // or type=radio
if (input)
{
    console.log(input.value)
}

【讨论】：

console.log(document.querySelector('input[type=radio]') == true);对我来说是假的。如何检查无线电输入是否存在？
如果您的相等性检查返回 false，这意味着 querySelector() 找不到与提供的选择器匹配的元素。这意味着该元素不存在。如果您的选择器是input[type=checkbox]:checked，则不存在选中的复选框。
如果选择是或否，我得到正确的值，但如果没有选择，我得到一个错误

【解决方案3】：

你没有检查无线电是否被检查。结果document.querySelector返回第一个带有value = "yes"的无线电使用:checked是querySelector

if (document.querySelector('input.input' + b + ':checked') !== null) {
        currentInput = document.querySelector('input.input' + b + ':checked').value;
        console.log(currentInput)
    }

【讨论】：

这里的问题是，如果没有选择任何单选按钮，我会收到一个错误：Uncaught TypeError: Cannot read property 'value' of null
@Sweepster 它不会出错，因为您首先检查它是否不是null 是if 条件。然后你正在访问它的value。您提供的代码工作正常
但您的代码仅检查检查的输入是否不为空。这个函数也需要在文本输入上运行，因此我需要先检查输入是文本输入还是无线电输入，然后返回错误
你的小提琴上的错误发生是因为在第 14 行你检查'input.input' + b (if (document.querySelector('input.input' + b) !== null)) 但在第 15 行你得到'input.input' + b + ':checked' 的值。只需在 if 中添加':checked'。

【解决方案4】：

我的解决方案：

if (document.querySelector('input.input' + b).type == "radio") { //this is a radio input                
    if (document.querySelector('input[type=radio]:checked')) { //a radio option is selected                 
        showNext();

    } else { // no radio option is selected so show error       
            showRequired.style.display = "block";
    }               
} else { // not a radio input

}

【讨论】：