我现在正在学习 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")
}
}
});
最佳答案
不要在循环内执行此操作。当您找到匹配项时,使用变量进行标记,然后在循环后检查该标记并相应地显示警报。试试这个:
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");
});
关于Javascript 基本循环帮助 - 基本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48523936/