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

问题描述 投票:1回答:4

码:

<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(一)触发。

功能检查currentInput,看是否输入空白。如果是空白的,它显示一个错误信息。如果不是空白,它隐藏在div。

然而随着单选按钮,currentInput总是返回“是”是否选择什么都没有,没有选择或选择yes。由于它不是空白,它隐藏在div。

预期的结果应该是该错误消息显示,直到用户进行选择。只有当用户点击未来,它应隐藏股利。

所以我的问题是,是什么原因造成我的问题,怎么能解决吗?

jsfiddle

javascript html
4个回答
0
投票

使用方法:检查

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

0
投票

收音机和复选框始终返回自己的价值。 你必须做的第一件事是检查是否选择其中的一个,然后获取选定一个的值。

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

0
投票

你不检查无线电设备是否选中或not.As 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)
    }

0
投票

我的解决方案:

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

}
© www.soinside.com 2019 - 2024. All rights reserved.