Вот пара моментов, которые помогут вам преодолеть трудности и понять, что происходит с вашим кодом.
Назначение ссылки на функцию вместо выполнения функции
Вы пытаетесь назначить ссылку на каждую функцию (красную, синюю и т. Д.) Для индекса в вашем массиве 'simonArr'; однако на самом деле вы выполняете каждой из этих функций и присваиваете результат каждой функции для этих индексов.
simonArr[0] = red();
Выполняет функцию, на которую ссылается имя 'red', и присваивает результат, который не определен, потому что функция 'red' ничего не возвращает, в массив 'simonArr' с индексом 0. Скобки () - это что вызвать выполнение функции.
simonArr[0] = red;
Будет делать то, что вы намеревались сделать. Он возьмет функцию, на которую ссылается имя 'red', и назначит ссылку на саму функцию для 'simonArr' с индексом 0, и не выполнит функцию.
Почему ваш onclick не выполняет
Ваш код "onclick" будет работать нормально, но он не , кажется, работает. Это потому, что к тому времени, когда вы нажимаете на кнопки, ваши функции (красные, синие и т. Д.) Уже были вызваны и устанавливаем непрозрачность ваших кнопок на 25% здесь:
var simonArr = [];
simonArr[0] = red();
simonArr[1] = blue();
simonArr[2] = green();
simonArr[3] = yellow();
Снимите скобки (), и вы увидите ожидаемые эффекты от ваших нажатий кнопок.
Изменение вашего примера, чтобы прояснить все это
Я немного изменил ваш код, чтобы продемонстрировать оба этих пункта:
- Я удалил скобки из ваших вызовов функций
- Я изменил ваши обработчики onclick для ссылки на сохраненные вами ссылки на функции (см. Ниже)
- Я добавил консольное ведение журнала, чтобы вы могли видеть, когда выполняются эти вызовы. Если вы раньше не использовали консольное ведение журнала, я настоятельно рекомендую вам помочь, когда вы учитесь. Проверьте инструменты разработчика для вашего любимого браузера.
var simonArr = [];
simonArr[0] = red;
simonArr[1] = blue;
simonArr[2] = green;
simonArr[3] = yellow;
function red(){
console.log('red was executed!');
setInterval( function(){
console.log('the delayed function called was executed');
document.getElementById('red1').style.opacity = ".25";
}, 4000);
}
function blue(){
console.log('blue was executed!');
document.getElementById('blue1').style.opacity = ".25";
}
function green(){
console.log('green was executed!');
document.getElementById('green1').style.opacity = ".25";
}
function yellow(){
console.log('yellow was executed!');
document.getElementById('yellow1').style.opacity = ".25";
}
button { padding: 1em; }
#red1 { background-color: red; }
#blue1 { background-color: blue; }
#green1 { background-color: green; }
#yellow1 { background-color: yellow; }
<button id="red1" onclick="simonArr[0]()">Red</button>
<button id="blue1" onclick="simonArr[1]()">Blue</button>
<button id="green1" onclick="simonArr[2]()">Green</button>
<button id="yellow1" onclick="simonArr[3]()">Yellow</button>
Что происходит с обработчиками onclick?
Ну, теперь каждый индекс вашего массива 'simonArr' ссылается на одну из ваших функций. Так, например, red и simonArr[0] теперь ссылаются на одну и ту же функцию. Итак, это утверждение:
red();
... и это утверждение:
simonArr[0]();
... будет делать то же самое. Обе ссылаются на одну и ту же функцию, и добавление скобок приведет к выполнению этой функции. Надеюсь, что все поможет. Удачи, продолжая исследовать!