Блог

Я пытаюсь получить как минимум три ответа из 10 текстовых полей. И появится предупреждение, если общее количество ответов меньше трех. Я также пытаюсь исключить ответы, которые являются только пробелами, поэтому я использую return x.replace(/^s |s $/gm,'') , чтобы избавиться от пробелов до и после строки.

Что мне нужно сделать, это сначала установить переменную «count» равной 0. Далее, чтобы определить, есть ли хотя бы один символ в определенном текстовом поле, и если да, добавьте 1 к «count». Затем сделайте это для всех 10 текстовых полей. После этого проверьте, больше ли «count», чем 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
        }
    }```
  

Это требует циклов:

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

В имеющемся у вас коде не только одни и те же строки повторяются 10 раз (единственная значимая вещь, которая там меняется, — это идентификатор текстового поля), но и их значения фактически не проверяются: с myTrim('x2') параметром, который вы передаете внутри своей функции, это буквальная строка ‘x2’, а не значение переменной x2.

В качестве примечания всегда выражайте свое намерение напрямую; если проверка выполняется по пустой строке, запишите эту проверку как есть. И да, писать свою собственную trim реализацию на самом деле не обязательно.

На самом деле, вам не нужно проверять все значения текстового поля:

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

Вы можете использовать селектор классов, Document.getElementsByClassName("text-box") , сначала применить общий класс ко всем таким текстовым полям. Затем повторите цикл над результатами.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Вы можете получить доступ к входным данным по имени класса и работать с результатом в виде массива:

 function calculate() {
  const elements = document.getElementsByClassName('value-container');
  const result = Array.from(elements).map(e => e.value).filter(v => !!v amp;amp; !!v.toString().trim()).length;
  document.getElementById('result').innerHTML = `Count of fields with value: ${result}`;
}  

 <input type="text" class="value-container" /><br/>
<input type="text" class="value-container" /><br/>
<input type="text" class="value-container" /><br/>
<input type="text" class="value-container" /><br/>

<button type="button" onclick="calculate()">Get Result</button>

<div id="result">
</div>  

https://developer.mozilla.org/ru/docs/Web/API/Document/getElementsByClassName
https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array