如何检测div是否可见并包含输入字段

Question

这与querySelectorAll detecting value in input不同。

我不是在问输入字段是否有值。我在问如何检测当前可见的div是否包含输入字段。我要问一个Stackoverflow要求的新问题。

我有一系列的div，从id问题0到问题35。不过，出于我的问题的目的，我们只需要如下查看这几个div：

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

<div class="questionholder" id="question0" style="display:block">
    <a class="text2button" onclick="displayquestion(1)">Start</a>
</div>
<div class="questionholder" id="question1" style="display:none">
    <h5>Surname</h5>
    <input class="input1" name="ln"><br>    
    <a class="text2button" onclick="displayquestion(2)">Next</a>
</div>
<div class="questionholder" id="question2" style="display:none">
    <h5>Given Name</h5>
    <input class="input2" name="gn"><br>
    <a class="text2button" onclick="displayquestion(3)">Next</a>
</div>
<div class="questionholder" id="question3" style="display:none">
    <h5>Relationship Surname</h5>
    <input class="input3" name="REL"><br>
    <a class="text2button" onclick="displayquestion(4)">Next</a>
</div>
<div class="questionholder" id="question4" style="display:none">
    <h5>Are multiple names involved?</h5><br>
    <a class="text2button" onclick="displayquestion(5)">Yes</a>
    <a class="text2button" onclick="displayquestion(6)">No</a>
</div>
<div class="questionholder" id="question5" style="display:none">
    <h5>What is the second name?</h5>
    <input class="input5" name="secondName"><br>
    <a class="text2button" onclick="displayquestion(6)">Next</a>
</div>
<div class="questionholder" id="question6" style="display:none">
    <h5>What is your fav color?</h5>
    <input class="input6" name="favColor"><br>
    <a class="text2button" onclick="displayquestion(7)">Next</a>
</div>

如您所见，两个div都在标记中包含一个按钮，该按钮会触发一个名为displayquestion（a）的javascript函数：

function displayquestion(a){
    var b = a-1;
    var currentInput = '';
    var questions = document.getElementsByClassName("questionholder");
    var showRequired = document.getElementById("requiredMessage");
    console.log("a = " + a + " and b = " + b);

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


    if (([0,3,4,7].indexOf(b) !== -1)) {    // Enter in [] all question # that should be IGNORED. question0 = 0, question1 = 1, etc         
        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 {                            
        console.log("path 2");

        if (currentInput == '') {
            showRequired.style.display = "block";
        } else {
            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";
            }
        }
    }       
}

onclick发送一个与要显示的下一个问题对应的数字。然后，该函数将隐藏所有问题div，并显示包含idquestion＃的div，其中＃=按钮发送的数字。

但是，该功能还用于检查是否应忽略该问题（换句话说，如果需要填写输入字段，它将阻止“下一步”按钮起作用。在其他情况下，应忽略这些问题）如果div包含一个输入字段，则未要求查询的单词会出现在if语句中if（（[[0,3,4,7] .indexOf（b）！== -1）））或显示错误消息t空白。

如果输入字段不为空，则“下一步”按钮应该起作用。

请参见jsfiddle该代码仅在javascript包含在正文内容中时起作用。

到目前为止，除了问题div根本不包含任何输入之外，我的工作情况都很好。在这种情况下：问题4。

您会注意到此问题仅包含“是”和“否”按钮。现在，应该忽略此问题，因为if语句[0,3,4,7] .indexOf（b）！== -1）包含数字4，与问题4对应。

问题在于，这仅在用户单击“是”按钮时有效。如果用户单击“否”，则会显示错误消息。

我该如何修正我的代码，使YES和NO都被忽略（不显示错误消息），以便Yes导致问题5，然后6产生，而No导致问题6直接按预期产生？

请不要使用jQuery。

Answer 1

到目前为止，我的解决方案是：

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

    if (([0,3,4,7].indexOf(b) !== -1)) {    // Enter in [] all question # that should be IGNORED. question0 = 0, question1 = 1, etc         
        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 if (ignore == 1) {
        console.log("path 2");
        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 if (currentInput == '') {
        console.log("path 3");
        showRequired.style.display = "block";
    } else {
        console.log("path 4");
        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";
        }
    }       
}

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

<div class="questionholder" id="question0" style="display:block">
    <a class="text2button" onclick="displayquestion(1)">Start</a>
</div>
<div class="questionholder" id="question1" style="display:none">
    <h5>Surname</h5>
    <input class="input1" name="ln"><br>    
    <a class="text2button" onclick="displayquestion(2)">Next</a>
</div>
<div class="questionholder" id="question2" style="display:none">
    <h5>Given Name</h5>
    <input class="input2" name="gn"><br>
    <a class="text2button" onclick="displayquestion(3)">Next</a>
</div>
<div class="questionholder" id="question3" style="display:none">
    <h5>Relationship Surname</h5>
    <input class="input3" name="REL"><br>
    <a class="text2button" onclick="displayquestion(4)">Next</a>
</div>
<div class="questionholder" id="question4" style="display:none">
    <h5>Are multiple names involved?</h5><br>
    <a class="text2button" onclick="displayquestion(5,1)">Yes</a>
    <a class="text2button" onclick="displayquestion(6,1)">No</a>
</div>
<div class="questionholder" id="question5" style="display:none">
    <h5>What is the second name?</h5>
    <input class="input5" name="secondName"><br>
    <a class="text2button" onclick="displayquestion(6)">Next</a>
</div>
<div class="questionholder" id="question6" style="display:none">
    <h5>What is your fav color?</h5>
    <input class="input6" name="favColor"><br>
    <a class="text2button" onclick="displayquestion(7)">Next</a>
</div>

Answer 2

我添加了一个属性ignoreValidation[true/false]，它将忽略验证并直接转到所需的步骤。

也许它不是最好的解决方案，但是对您的代码进行了最简单且很少的修改

function displayquestion(a, ignoreValidation){
        console.clear();
		var b = a-1;
		var currentInput = '';
		var questions = document.getElementsByClassName("questionholder");
		var showRequired = document.getElementById("requiredMessage");
		console.log("a = " + a + " and b = " + b);
		
		if (document.querySelector('input.input' + b) !== null) {
			var currentInput = document.querySelector('input.input' + b).value;
		}
			
		
		if (([0,3,4,7].indexOf(b) !== -1) || ignoreValidation) {	// Enter in [] all question # that should be IGNORED. question0 = 0, question1 = 1, etc			
			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 {							
			console.log("path 2");
			
			if (currentInput == '') {
				showRequired.style.display = "block";
			} else {
				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";
				}
			}
		}		
	}

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

<div class="questionholder" id="question0" style="display:block">
        <a class="text2button" onclick="displayquestion(1)">Start</a>
    </div>
    <div class="questionholder" id="question1" style="display:none"> <!-- REQUIRED -->
        <h5>Surname</h5>
        <input class="input1" name="ln"><br>	
        <a class="text2button" onclick="displayquestion(2)">Next</a>
    </div>
    <div class="questionholder" id="question2" style="display:none">
        <h5>Given Name</h5>
        <input class="input2" name="gn"><br>
        <a class="text2button" onclick="displayquestion(3)">Next</a>
    </div>
    <div class="questionholder" id="question3" style="display:none">
        <h5>Relationship Surname</h5>
        <input class="input3" name="REL"><br>
        <a class="text2button" onclick="displayquestion(4)">Next</a>
    </div>
    <div class="questionholder" id="question4" style="display:none">
        <h5>Are multiple names involved?</h5><br>
        <a class="text2button" onclick="displayquestion(5, true)">Yes</a>
		<a class="text2button" onclick="displayquestion(6, true)">No</a>
    </div>
    <div class="questionholder" id="question5" style="display:none">
        <h5>What is the second name?</h5>
        <input class="input5" name="secondName"><br>
        <a class="text2button" onclick="displayquestion(6)">Next</a>
    </div>
    <div class="questionholder" id="question6" style="display:none">
        <h5>What is your fav color?</h5>
        <input class="input6" name="favColor"><br>
        <a class="text2button" onclick="displayquestion(7)">Next</a>
    </div>