JavaScript中的循环和计数

我试图从总共10个文本框中得到至少三个回复。如果响应总数少于三个，则会发出警报。我还尝试消除仅为空格的响应，因此我使用

return x.replace（/^\s+\s+$/gm'）

来消除字符串前后的空格

我需要做的是首先将变量“count”设置为0。接下来，要检测特定文本框中是否至少有一个字符，如果有，请在“计数”中添加1。然后对所有10个文本框执行此操作。然后检查“计数”是否大于2；如果是，请转到下一页；否则，将发出警报

但它不起作用

另一个问题是，如何避免对所有10个文本框重复该过程

var count=0

 function myTrim(x) {
  return x.replace(/^\s+|\s+$/gm,'');
}

var x1 =  document.getElementById("textbox1").value; 
  var t1 = myTrim("x1");
  var n1 = t1.length;

  if  (n1<1){
    count=count+0
  } else{
    count=count+1
  }

var x2 =  document.getElementById("textbox2").value; 
  var t2 = myTrim("x2");
  var n2 = t2.length;

  if  (n2<1){
    count=count+0
  } else{
    count=count+1
  }

var x3 =  document.getElementById("textbox3").value; 
  var t3 = myTrim("x3");
  var n3 = t3.length;

  if  (n3<1){
    count=count+0
  } else{
    count=count+1
  }
var x4 =  document.getElementById("textbox4").value; 
  var t4 = myTrim("x4");
  var n4 = t4.length;

  if  (n4<1){
    count=count+0
  } else{
    count=count+1
  }

var x5 =  document.getElementById("textbox5").value; 
  var t5 = myTrim("x5");
  var n5 = t5.length;

  if  (n5<1){
    count=count+0
  } else{
    count=count+1
  }
var x6 =  document.getElementById("textbox6").value; 
  var t6 = myTrim("x6");
  var n6 = t6.length;

  if  (n6<1){
    count=count+0
  } else{
    count=count+1
  }
var x7 =  document.getElementById("textbox7").value; 
  var t7 = myTrim("x7");
  var n7 = t7.length;

  if  (n7<1){
    count=count+0
  } else{
    count=count+1
  }

var x8 =  document.getElementById("textbox8").value; 
  var t8 = myTrim("x8");
  var n8 = t8.length;

  if  (n8<1){
    count=count+0
  } else{
    count=count+1
  }
var x9 =  document.getElementById("textbox9").value; 
  var t9 = myTrim("x9");
  var n9 = t9.length;

  if  (n9<1){
    count=count+0
  } else{
    count=count+1
  }
var x10 =  document.getElementById("textbox10").value; 
  var t10 = myTrim("x10");
  var n10 = t10.length;

  if  (n10<1){
    count=count+0
  } else{
    count=count+1
  }



function checknumber() {
    if (count < 3){
            alert("You must enter at least 3 responses before you can continue.");
        } else {
            location.href="https://www.kindpng.com/imgv/hxbmxi_symbol-thumbs-up-clip-art-vector-free-clipart/" ; // if selection made, go to next page
        }
    }```

var计数=0
功能myTrim（x）{
返回x.replace（/^\s+|\s+$/gm'，）；
}
var x1=document.getElementById（“textbox1”）.value；
var t1=myTrim（“x1”）；
var n1=t1.1长度；
如果（n1这会尖叫循环：

let count = 0;
for (let i = 1; i <= 10; i++) {
  const textBoxValue = document.getElementById('textbox' + i).value;
  if (textBoxValue.trim() !== '') count++;
}

您可以使用类选择器Document.getElementsByClassName（“文本框”）

，首先将公共类应用于所有此类文本框，然后循环结果

---

您可以按类名访问输入，并将结果作为数组处理：

函数计算（）{
const elements=document.getElementsByClassName（'value-container'）；
const result=Array.from（elements）.map（e=>e.value）.filter（v=>！！v&&！！v.toString（）.trim（））.length；
document.getElementById（'result'）.innerHTML=`值为${result}`的字段计数；
}

得到结果

次要的事情，但是

.trim（）

（）去掉了字符串开头/结尾的空格，而无需编写自己的正则表达式。

count=count+0

=>但是为什么呢？说真的，这应该是一个循环。这段代码的具体问题是

myTrim（“x1”）

实际上应该是

myTrim（x1）

（没有引号）。当您调用

myTrim（“x2”）

时，您没有传递x2的值，而是传递字符串常量“x2”@DBS。感谢您指出这个问题。我想我在考虑一些浏览器不支持trim（）方法。是否可以将方法“post”合并到函数“checkForm”中，因为我还想将响应存储在服务器上，而且我似乎只能使用post方法来完成。在单个函数中承担太多的责任不是一个好主意。您可以在那里调用其他函数，例如，在完成后继续重定向。

function formHasAtLeast(requiredMinimum) {
  let count = 0;
  for (let i = 1; i <= 10; i++) {
    const textBoxValue = document.getElementById('textbox' + i).value;
    if (textBoxValue.trim() !== '') count++;
    // this line will stop that iteration immediately, 
    // as there's no need to check for 4th, 5th etc. textbox
    if (count === requiredMinimum) return true; 
  }
  return false;
}

function checkForm() {
  const minAnswers = 3;
  if (formHasAtLeast(minAnswers)) {
    location.href = "YOUR URL";
  }
  else {
    alert(`You have to fill at least ${minAnswers} responses`);
  }
}