CODEWITHSUNDEEP
javascripthtml
user10348468
user10348468

Reputation:

Test whether a string contains a word from an array of strings

it doesn't work. it always goes with the else. i need to use array, and see if a string contains any of the words of the array. please help, this is really annoying

function buttonClick() {
  var name = document.getElementById('myText').value;
  var yourstring = name;
  var substrings = ['fruit', 'apple'];
  var length = substrings.length;
  while (length--) {
    if (yourstring.indexOf(substrings[length]) != -1) {
      var outcome = 1;
    } else {
      var outcome = 2;
    }
  }
  switch (outcome) {
    case 1:
      document.getElementById('fruitvalue').innerHTML = name + 'is ...';
      break;
    case 2:
      document.getElementById('fruitvalue').innerHTML = name + 'is not ...';
      break;
  }
}
<body>
  <center>
    Last Name:<input type="text" id="myText" value="">
    <button 
      onClick="buttonClick()" 
      style="font-family:font; color:blue;"
    >Submit</button>
    <h2 id="fruitvalue"></h2>
  </center>
</body>
</head>

Upvotes: 0

Views: 54

Answers (4)

Ropali Munshi
Ropali Munshi

Reputation: 3006

Try this.

function buttonClick() {
  var name = document.getElementById('myText').value;
  var yourstring = name;
  var substrings = ['fruit', 'apple'];

    if (substrings.includes(yourstring)) {
      var outcome = 1;
    } else {
      var outcome = 2;
    }

  switch (outcome) {
    case 1:
      document.getElementById('fruitvalue').innerHTML = name + ' is ...';
      break;
    case 2:
      document.getElementById('fruitvalue').innerHTML = name + ' is not ...';
      break;
  }
}

Upvotes: 0

lucascaro
lucascaro

Reputation: 19257

I'd suggest you do away with the loops and the ifs, and significantly reduce the code by using array.some and String.prototype.includes. This code could be clearly written as a single line:

    function hasWord(str, words) {
      return words.some(word => str.includes(word));
    }

    const name = document.getElementById('myText').value;
    const substrings = ['fruit', 'apple'];
    const element = document.getElementById('fruitvalue');
    
    function buttonClick() {
      const matches = hasWord(name, substrings);    
      const suffix = matches ? 'is ...' : 'is not ...';
      element.innerHTML = `${name} ${suffix}`;
    }
    <body>
      <center>
        Last Name:
        <input type="text" id="myText" value="">
        <button 
          onClick="buttonClick()" 
          style="font-family:font; color:blue;"
        >Submit</button>
        <h2 id="fruitvalue"></h2>
      </center>
    </body>

Upvotes: 1

wang
wang

Reputation: 1780

You should use break inside first if block of while block, otherwise, outcome will be set with other values in next iterations.

function buttonClick() {
  var name = document.getElementById("myText").value;
  var yourstring = name;
  var substrings =['fruit', 'apple'],
      length = substrings.length;
      
  while(length--) {
    if (yourstring.indexOf(substrings[length])!==-1) {
      var outcome=1;
      break;
    }
    else {
      var outcome=2;
    }
  }
  
  switch (outcome) {
    case 1 :
      document.getElementById("fruitvalue").innerHTML = (name + "is ...");
      break;
    case 2 :
      document.getElementById("fruitvalue").innerHTML = (name + "is not ...");
      break;
  }
}
<body>
  <center>
    Last Name:<input type="text" id="myText" value="">
    <button onClick="buttonClick()" style="font-family:font;color:blue;">Submit</button>
    <h2 id="fruitvalue"></h2>
  </center>
</body>

Optimized version is here:

function buttonClick() {
  const yourstring = document.getElementById("myText").value;
  const substrings =['fruit', 'apple']
  
  document.getElementById("fruitvalue").innerHTML = substrings.filter(s => yourstring.indexOf(s) !== -1).length ?
     (yourstring + " is ...") : (yourstring + " is not ...")
}
<body>
  <center>
    Last Name:<input type="text" id="myText" value="">
    <button onClick="buttonClick()" style="font-family:font;color:blue;">Submit</button>
    <h2 id="fruitvalue"></h2>
  </center>
</body>

Upvotes: 0

Ankush Sharma
Ankush Sharma

Reputation: 677

Because you are updating your outcome value for each item in the array. So, if the last item in the array is not your input value, switch statement will check for that only. So, you can use code like below

 function buttonClick() {
    var name = document.getElementById("myText").value;
    var yourstring = name;
    var substrings =['fruit', 'apple'];
    //only change
    document.getElementById("fruitvalue").innerHTML = 
    substrings.includes(yourstring) ? // use of includes function to check item in the array
    (name + " is ...") : 
    (name + " is not ...");  
}
<body>
    <center>
    Last Name:<input type="text" id="myText" value="">
    <button onClick="buttonClick()" style="font-family:font; 
    color:blue;">Submit</button>
    <h2 id="fruitvalue"></h2>
    </center>
</body>

Upvotes: 1

Related Questions