【问题标题】:Stuck in a for loop with multiple if statements陷入带有多个 if 语句的 for 循环
【发布时间】:2019-07-09 09:17:56
【问题描述】:

抱歉,如果标题设置不正确,因为我不知道是什么原因造成的,但我的循环总是会导致“错误”语句。

直截了当,这里是code,下同,如果有人喜欢在Codepen中查看..

function Validation() {
	if(!ValidateForm()) {
		document.getElementById("errorBox").innerHTML = "Please double check, that you have answered all the questions and try again."
		return false;
	} else {
		document.getElementById("errorBox").innerHTML = ""
		alert("Thank you for your cooperation");						
	}
}
function ValidateForm() {
	var a = document.getElementsByName('Activity');
	var v = document.getElementsByName('Volunteers');
	//var e = document.getElementsByName('Name');
							
	for (var i = 0; i<a.length; i++) {
		if (a[i].type == 'checkbox') {
			if (a[i].checked) {
        
        for (var j = 0; j<v.length; j++) {
		      if (v[j].type == 'checkbox') {
			      if (v[j].checked) {
              alert("it werks!!")
              return true;
            }
          }
        }
        return true;
      } else {
       return false;
      }
    }
  }
}
<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
    <div class="row" style="margin-top: 20px;">
		  <div class="col-sm-12">
			  <div class="form-group">
				  <p>
					<b>1. Which of the volunteer jobs did you like the most in the year 2018?</b>
					</p>
					<p style="margin-left: 16px;">
					(You can choose one or more options as your answer)
					</p>
					<div style="margin-left: 35px;">
					  <input type="checkbox" id="Activity1" name="Activity" value="supplies" > 1<br>
						<input type="checkbox" id="Activity2" name="Activity" value="food" > 2<br>
						<input type="checkbox" id="Activity3" name="Activity" value="plastic" > 3<br>
						<input type="checkbox" id="Activity4" name="Activity" value="clean" > 4<br>
						<input type="checkbox" id="Activity5" name="Activity" value="painting" > 5<br>
						<input type="checkbox" id="Activity6" name="Activity" value="zmps" > 6<br>
						<input type="checkbox" id="Activity7" name="Activity" value="sumica" > 7<br>
						<input type="checkbox" id="Activity8" name="Activity" value="blood" > 8<br>
						<input type="checkbox" id="Activity9" name="Activity" value="volunteer" > 9<br>
					</div>
				</div>
			</div>
		</div>
    <div class="row" style="margin-top: 20px;">
		  <div class="col-sm-12">
			  <div class="form-group">
				  <p>
					<b>2. How much time are you prepared to spend as volunteer?</b>
					</p>
					<p style="margin-left: 16px;">
					(You can only choose one option as your answer)
					</p>
					<div style="margin-left: 35px;">
					  <input type="radio" id="Volunteers1" name="Volunteers" value="oneWeek" > 1<br>
						<input type="radio" id="Volunteers2" name="Volunteers" value="fiveWeek" > 2<br>
						<input type="radio" id="Volunteers3" name="Volunteers" value="oneMonth" > 3<br>
						<input type="radio" id="Volunteers4" name="Volunteers" value="fivemonth" > 4<br>
						<input type="radio" id="Volunteers5" name="Volunteers" value="halfYear" > 5<br>
						<input type="radio" id="Volunteers6" name="Volunteers" value="twoYear" > 6<br>
						<input type="radio" id="Volunteers7" name="Volunteers" value="other" > 
						<input type="text" placeholder="other" /><br>
					</div>
				</div>
			</div>
		</div>
  <button style="margin-top:30px;"type="submit" id="Submit" name="Submit">Send me away</button>
    <div id="errorBox" style="margin-bottom:50px; color: red"></div>
</form>

我想做的是创建一个检查表单的函数。当然,给定的代码只是一个演示,因为我的表单更广泛。 该代码应该检查一个答案,如果检查,检查下一个,依此类推...... 我试图将 if 语句分开,但这只会导致在检查第一个答案后,代码会发送消息,就好像整个表单都已填写一样。

当我们这样做时,如果一个表单有一个带有复选框答案的问题,说其他(写下你的答案),我将如何编写一个代码,首先检查复选框是否被选中,然后检查输入是否也给了?

我将非常感谢您在问题的第二部分提供的任何帮助,以及在第一部分发现错误并纠正我:)

编辑:: 使用 console.log 测试了代码,只有在第一个问题中的所有复选框和第二个问题中的一个单选被选中后,表单才被标记为正确回答。

另一个结论,似乎出于某种原因,仅对于第一个问题的某些答案,代码会认为它们没有被检查,而对于其他人(如第一个答案),代码会接受它并继续以正确回答的形式.对此有何解释?

【问题讨论】:

  • 如果投了这个问题-1的人能指出困扰他们的问题,我将不胜感激,这样我就可以了解我做错了什么,否则这种举动实际上没有任何意义。 .
  • 也许这个stackoverflow.com/questions/20068487/…可以帮到你!
  • @MariaIrudayaRegilanJ,谢谢,马上去看看。

标签: javascript html forms if-statement checkbox


【解决方案1】:

我检查了你的代码,因为你正在检查,所以循环有问题

if (a[i].checked) {

如果未选中则返回 false 。这就是问题所在,如果未选中第一个复选框,它将不会检查下一个活动复选框。

【讨论】:

  • 起初我并没有真正理解你想说什么,然后在输入我自己的答案后,我收到了你的消息:) 感谢您的指出和时间:)
  • 将确保我的答案在未来更加清晰:p
【解决方案2】:

所以,如果我没看错的话,如果是“收音机”类型,那么“志愿者”,但在代码中,您正在检查“复选框”。 认为这显然应该总是导致退出第二个循环。

为了快速调试,我还建议放置一些console.log语句,这样你就可以在浏览器控制台中看到你的代码走了多远……

【讨论】:

  • 即使在该问题上将“复选框”编辑为“收音机”后,问题似乎仍然存在,将尝试使用 console.log,谢谢您的建议
  • 嗯,我刚刚在这里运行了代码sn-p,得到了“谢谢合作”的信息——这就是预期的结果吧?!
  • 应该是这样,是的。你有没有改变任何东西?我仍然以某种方式遇到问题......
  • 我自己检查了截图,似乎由于某种原因,大多数答案都不会触发代码,让它认为它们甚至没有被选中......不知道,什么正在进行中
【解决方案3】:

于是我查看了代码,发现问题出在return false 和return true,

新的,正常工作的代码如下:

function Validation() {
  if(!ValidateForm()) {
    document.getElementById("errorBox").innerHTML = "Please double check, that you have answered all the questions and try again."
      return false;
  } else {
    document.getElementById("errorBox").innerHTML = ""
    alert("Thank you for your cooperation");						
  }
}

function ValidateForm() {
  var a = document.getElementsByName('Activity');
  var v = document.getElementsByName('Volunteers');    							
  for (var i = 0; i<a.length; i++) {
    //console.log(a[i]);
    if (a[i].checked) {
      for (var j = 0; j<v.length; j++) {
        if (v[j].checked) {
          console.log(a[i],",",v[j])
          return true;
        }
      }
    }
  }
}
<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
<div class="row" style="margin-top: 20px;">
  <div class="col-sm-12">
    <div class="form-group">
	    <p>
	    <b>1. Which of the volunteer jobs did you like the most in the year 2018?</b>
	    </p>
	    <p style="margin-left: 16px;">
        (You can choose one or more options as your answer)
	    </p>
	      <div style="margin-left: 35px;">
	        <input type="checkbox" id="Activity1" name="Activity" value="supplies" > 1<br>
	        <input type="checkbox" id="Activity2" name="Activity" value="food" > 2<br>
	        <input type="checkbox" id="Activity3" name="Activity" value="plastic" > 3<br>
	        <input type="checkbox" id="Activity4" name="Activity" value="clean" > 4<br>
	        <input type="checkbox" id="Activity5" name="Activity" value="painting" > 5<br>
	        <input type="checkbox" id="Activity6" name="Activity" value="zmps"> 6<br>
	        <input type="checkbox" id="Activity7" name="Activity" value="sumica"> 7<br>
	        <input type="checkbox" id="Activity8" name="Activity" value="blood"> 8<br>
	        <input type="checkbox" id="Activity9" name="Activity" value="volunteer"> 9<br>
	      </div>
      </div>
    </div>   
  </div>   
  <div class="row" style="margin-top: 20px;">
    <div class="col-sm-12">
      <div class="form-group">
        <p>
        <b>2. How much time are you prepared to spend as volunteer?</b>
        </p>
        <p style="margin-left: 16px;">
          (You can only choose one option as your answer)
        </p>
        <div style="margin-left: 35px;">
          <input type="radio" id="Volunteers1" name="Volunteers" value="oneWeek" > 1<br>
          <input type="radio" id="Volunteers2" name="Volunteers" value="fiveWeek" > 2<br>
          <input type="radio" id="Volunteers3" name="Volunteers" value="oneMonth" > 3<br>
          <input type="radio" id="Volunteers4" name="Volunteers" value="fivemonth" > 4<br>
          <input type="radio" id="Volunteers5" name="Volunteers" value="halfYear" > 5<br>
          <input type="radio" id="Volunteers6" name="Volunteers" value="twoYear" > 6<br>
          <input type="radio" id="Volunteers7" name="Volunteers" value="other" > 
          <input type="text" placeholder="other" /><br>
        </div>
      </div>
    </div>
  </div>
  <button style="margin-top:30px;"type="submit" id="Submit" name="Submit">Send me away</button>
  <div id="errorBox" style="margin-bottom:50px; color: red"></div>
</form>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-20
    • 2019-09-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多