Способ обратного вызова функции

Question

Здесь я пытаюсь сделать оба divs красным, через обратный вызов. Однако он работает только для одного, а не для обоих.

Я знаю, это, вероятно, не очень умный вопрос, но я действительно трачу несколько часов, пытаясь понять, почему это не работает.

Что в этом плохого?

<div id="foo">foo</div> 
<div id="bar">bar</div> 

<script> 

function foo() { 
    document.querySelector("#foo").style.color = "red"; 
} 

function bar() { 
    document.querySelector("#bar").style.color = "red"; 
} 

foo(bar); 

</script> 

Answer 1

При вызове foo(bar), он передает функцию bar в качестве аргумента foo. Тем не менее, foo не содержит никаких аргументов, и вы также не вызываете bar. Измените свою функцию foo так.

function foo(callback) { 
    document.querySelector("#foo").style.color = "red"; 
    callback(); 
} 

---

Update

Это решение не является лучшей практикой, однако для вашей ситуации. То, что вы пытаетесь выполнить, не требует обратного вызова. Вы должны сделать одно из следующего.

• Объединить эти две функции в одну.
• Звоните foo и bar вместе.

Вам следует избегать использования обратного вызова в таком простом случае, как это.

Answer 2

У вас есть две функции, но только вызовом одного:

foo(bar); 

проходит только bar функцию foo, которая ничего не делает с ним.

, чтобы получить эту работу называют обе функции:

foo(); 
bar();