Javascript basic loop help - basic

Question

Im learning Javascript now and I got a question that's been bugging me!

So, all I needed to do here is to type a color on this input box, click the button and change the headline to the color typed only if that typed color is in the array specified in the variable.

My code is half working... it does check if whatever color typed is inside the array, but the alert button pops up each time, is there a way to make the alert pop up only if the color typed isn't in the array please?

Working code: https://codepen.io/anon/pen/ddPWLP

Javascript code:

const myHeading = document.getElementById('myHeading');
const myButton = document.getElementById('myButton');
const myTextInput = document.getElementById('myTextInput');

var colors = ["red", "black", "blue"];

myButton.addEventListener('click', () => {
    for (var i=0; i<colors.length; i++){
        if (myTextInput.value === colors[i]){
            myHeading.style.color = myTextInput.value
        } else {
            alert("no color")
        }
    }

});

use a boolean variable and set it to true if a matching color has been found. check at the end of the for loop if the value of the bool is true. If it's false (the initial value), only then do the alert() — neuhaus
– neuhaus, Commented Jan 30, 2018 at 14:38
consider using a hash (an object) instead of an array for the colors. That way you don't have to search the entire array. — neuhaus
– neuhaus, Commented Jan 30, 2018 at 14:39

Racil Hilan · Accepted Answer · 2018-01-30 14:47:03Z

4

Don't do it inside the loop. Use a variable to flag when you find a match, and then after the loop check that flag and display the alert accordingly. Try this:

myButton.addEventListener('click', () => {
  var found = false;
  for (var i = 0; i < colors.length; i++) {
    if (myTextInput.value === colors[i]) {
      myHeading.style.color = myTextInput.value
      found = true;
    }
  }
  if (!found)
    alert("no color");
});

By the way, you don't need a loop for that. You can simply use the indexOf() methods. If the value exists in the array, it returns its index, otherwise it returns -1. Try this:

myButton.addEventListener('click', () => {
  if (colors.indexOf(myTextInput.value) > -1)
    myHeading.style.color = myTextInput.value
  else
    alert("no color");
});

edited Jan 30, 2018 at 14:47

answered Jan 30, 2018 at 14:39

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript basic loop help - basic

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related