Question

代码：

<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，其中包含一对单选按钮和一个next按钮。当用户单击下一步时，函数displayquestion（a）触发。

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

但是，使用单选按钮时，无论什么都没有选择，选择否或选择是，currentInput始终返回“是”。由于不为空，因此它会隐藏div。

预期结果应该是错误消息一直显示到用户做出选择为止。仅当用户单击下一步时，它才应隐藏div。

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

jsfiddle

Answer 1

使用：选中

div

Answer 2

您不检查是否已选中无线电。结果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)
    }

Answer 3

收音机和复选框始终返回其值。
您必须做的第一件事是检查是否选择了其中一个，然后获取所选值。

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

Answer 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

}

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

4 个答案: