How to check if all the values of an array are strings?

Question

The user can add more text areas. The text areas are initially empty. If they are empty I want a prompt that says all of the textarea are empty. If 1 out of the x amount of textarea have a string and the rest does not have a string I want a prompt that says that one is full and the rest are still empty the user has to complete them. If all of the textareas have a string i will store them into an array and put them into session storage.

The problem is when one of the textareas have a string and the rest does not. Both if the else if statmets are loggin to the 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')
      }
    })
})

Title asks for "is string", text asks for "is empty string", what is likely really wanted is the html "required" attribute and related techniques to avoid empty inputs. Clicked potentially short question and got wall of text. — ASDFGerte, Jun 20 '18 at 17:08
Check out underscore _.some and _.every which operate on collections. Pass a collection of the values and these will test if _.some / _.every element passes a test. As for the test, decide what you want, noting that underscore also provides _.isEmpty that operates on objects and strings. https://underscorejs.org/# — danh, Jun 20 '18 at 17:14

Incinirate · Answer 1 · 2018-06-20T17:15:59.833

You are .maping over the array of textfields; thus the if chain is run for each textfield. What you want to do is use a .filter and then check based on the results of that. Something like this:

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..');

score 0 · Answer 2 · answered Jun 20 '18 at 17:08

You can check the type of the variable using typeof

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

This stackoverflow post has more information related to your exact question: Check if a variable is a string in JavaScript

How to check if all the values of an array are strings?

2 Answers2