Question

用户可以添加更多文本区域。文本区域最初是空的。如果它们为空，我想提示说所有文本区域均为空。如果x个文本区域中有1个具有字符串，其余的没有字符串，我希望提示您说一个已满，其余的仍为空，用户必须完成操作。如果所有textarea都有一个字符串，我会将它们存储到一个数组中，然后将它们放入会话存储中。

问题是当文本区域之一具有字符串而其余区域没有字符串时。如果statmets已登录到consel，则两者都为空。

HTML

<div class="container">
    <h1 class="title">Question 1</h1>
    <textarea type="checkbox" name="question" id="q1" cols="30" rows="5"></textarea> <br><br>
    <input type="checkbox"><textarea class='ans' type="checkbox" name="question"  cols="30" rows="5"></textarea> <br><br>
    <input type="checkbox"><textarea class='ans'type="checkbox" name="question"  cols="30" rows="5"></textarea> <br><br>
    <input type="checkbox"><textarea class='ans'type="checkbox" name="question" cols="30" rows="5"></textarea> <br><br>
    <button onclick="getButton()">Add an option</button>
    <button class="submit">Submit</button>
  </div>

JS

let button = document.querySelector('button');
let container = document.querySelector('.container');
let subMitbutton = document.querySelector('.submit');
let textArea;
let answer;

let getButton = () => {
  // create input
  const input = document.createElement('input');
  // add type to input
  input.type = 'checkbox';
  // create textarea
  textArea = document.createElement('textarea');
  // add name to textArea
  textArea.name = 'question';
  // add className
  textArea.className = 'ans'
  // cols
  textArea.cols = 30;
  // rows
  textArea.rows = 5;
  // insert into the container
  container.insertBefore(input, button)
  container.insertBefore(textArea, button)  
}

let test;

container.addEventListener('click', function(e){
  if(e.target.value === '' && e.target.tagName === 'TEXTAREA'){
    // if the textArea empty ask the user 
    console.log('I am empty');
  } else if(e.target.tagName === 'TEXTAREA'){
    test = e.target;
    test.addEventListener('click', function(){
      console.log('hey')
    })
  } else if(e.target.tagName === 'INPUT'){
    e.target.nextSibling.style.border = e.target.checked ? '2px solid green' : '';
    answer = e.target.nextSibling.value;
  }
})

subMitbutton.addEventListener('click', function(e){
  let allText = [...document.querySelectorAll('textarea')];
  let arr= [];
    allText.map(text => {

      if(text.className === 'ans' && text.value === ''){
        console.log('evreything is empty')
      } else if(text.className === 'ans' && text.textLength !== 0){
        console.log(text.value);
        console.log('everything is full')
      } else {
        arr.push(text.value);
        sessionStorage.setItem('questions', JSON.stringify(arr));
        console.log('storred in local')
      }
    })
})

Answer 1

您正在.map遍历整个文本字段；因此，if链针对每个文本字段运行。您要做的是使用.filter，然后根据结果进行检查。像这样：

const allText = [...document.querySelectorAll('textarea')];
const containsText = allText.filter(field => field.textLength !== 0);

if (containsText.length === 0) console.log('Everything is empty');
else if (containsText.length === allText.length) console.log('Everything has text');
else console.log('Some have text, some do not..');

Answer 2

您可以使用typeof

检查变量的类型

var stringVariable = "abcde";
alert(typeof stringVariable); // this will display string

此stackoverflow帖子包含与您的确切问题有关的更多信息： Check if a variable is a string in JavaScript

如何检查数组的所有值是否都是字符串？

2 个答案: