Javascript基本循环帮助 - 基本

时间:2018-01-30 14:36:39

标签: javascript

我现在正在学习Javascript,而且我有一个问题,这些问题一直困扰着我!

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

我的代码是半工作的......它确实检查数组中是否有任何颜色类型,但每次都会弹出警报按钮,是否有办法只在颜色键入的情况下弹出警报&#39在阵列中,请问?

工作代码: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")
        }
    }

});

1 个答案:

答案 0 :(得分:4)

不要在循环内完成。找到匹配项时使用变量标记,然后在循环后检查该标记并相应地显示警报。试试这个:

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