Javascript 基本循环帮助 - 基本

Question

我现在正在学习 Javascript，有一个问题一直困扰着我!

因此，我在这里所需要做的就是在此输入框中键入颜色，单击按钮并将标题更改为键入的颜色(仅当键入的颜色位于变量中指定的数组中时)。

我的代码工作了一半...它确实检查输入的任何颜色是否在数组内，但每次都会弹出警报按钮，有没有办法让警报仅在输入的颜色不在时弹出请在数组中？

工作代码:https://codepen.io/anon/pen/ddPWLP

Javascript代码:

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")
        }
    }

});

Answer 1

不要在循环内执行此操作。当您找到匹配项时，使用变量进行标记，然后在循环后检查该标记并相应地显示警报。试试这个:

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

顺便说一下，你不需要循环。您可以简单地使用 indexOf() 方法。如果该值存在于数组中，则返回其索引，否则返回-1。试试这个:

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