Передача текста в функцию javascript

Я только начинаю на javascript и работаю над проблемой, которую дал нам наш инструктор. У нас есть html-сайт с четырьмя кнопками, каждая из которых имеет цвет, и когда вы нажимаете кнопку, она меняет цвет фона/текста. Пример HTML и javascript ниже.Передача текста в функцию javascript

HTML

<div id="wrapper"> 
    <ul id="switcher"> 
    <li id="grayButton"></li> 
    <li id="whiteButton"></li> 
    <li id="blueButton"></li> 
    <li id="yellowButton"></li> 
    </ul> 
</div>

CSS

document.getElementById("yellowButton").onclick = turnYellow; 

function turnYellow(){ 
    document.getElementById("wrapper").style.backgroundColor = "yellow"; 
    document.getElementById("wrapper").style.color = "orange"; 
    }

я получил, что работать хорошо, но я пытался реорганизовать так, что моя функция была более общим:

document.getElementById("grayButton").onclick = changeColor("gray", "white"); 

function changeColor(backColor, frontColor) { 
    document.getElementById("wrapper").style.backgroundColor = backColor; 
    document.getElementById("wrapper").style.color = frontColor; 
}

и я не могу изобразить почему это не работает. Есть предположения?

источник

2015-03-21 sespinos

Вы должны вызвать вашу функцию в анонимную функцию, добавив параметры () вызвавшую функцию, которая будет вызвана сразу:

document.getElementById("grayButton").onclick = function() { 
    changeColor("gray", "white"); 
}

источник

2015-03-21 22:51:36 tymeJV

Спасибо! Это сделал трюк. – sespinos

«element.onlick» событие требует функционального объекта (вызываемая/обратный вызов) не возвращаемое значение. Таким образом, это должно быть:

document.getElementById("grayButton").onclick = function(){ 
    changeColor("gray", "white"); 
}

Кроме того, HTML5 data attributes кажется, отличная идея:

<html> 
 
<body> 
 
<div id="wrapper"> 
 
    <ul id="switcher"> 
 
    <li data-bg-color="red" data-color="white" onclick="changeColor(this)"> 
 
     red/white 
 
    </li> 
 
    <li data-bg-color="gray" data-color="black" onclick="changeColor(this)"> 
 
     gray/black 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<script> 
 
    function changeColor(el) { 
 
     var wrapper = document.getElementById("wrapper"); 
 
     wrapper.style.color = el.getAttribute('data-color'); 
 
     wrapper.style.backgroundColor = el.getAttribute('data-bg-color'); 
 
    } 
 
</script> 
 
</body> 
 
</html>

HTML5 Data Attributes

источник

2015-03-21 23:05:33 felipsmartins

Это мое решение My example

HTML

<body onload="start()"> 
    <div id="wrapper"> 
     <ul> 
     <li data-params="yellow,orange">Hit me</li> 
     <li data-params="green,darkgreen">Hit me</li> 
     <li data-params="aqua,blue">Hit me</li> 
     <li data-params="chocolate,brow">Hit me</li> 
     </ul> 
    </div> 
    </body>

JavaScript

function start(){ 
    //Get necesary elements 
    var list = document.getElementsByTagName("li"); 
    //Adding event 
    for(var i in list){ 
    list[i].addEventListener("click", changeStyle); 
    } 
} 

function changeStyle(){ 
    var params = this.dataset.params.split(","), 
     wrapper = document.getElementById("wrapper"); 

    wrapper.style.backgroundColor = params[0]; 
    wrapper.style.color = params[1]; 
}

источник

2015-03-21 23:13:44 andalm

Вы просто называется функцией changeColor и присваивается возвращаемое значение, которое undefined в обработчик событий.

Я уверен, что он даже работал и менял цвет текста и цвет фона для этого элемента, но не так, как вы ожидали, например, синхронно и асинхронно.

Вам просто нужно оставить ссылку на обработчик событий следующим образом: changeColor без круглых скобок, как то, что вы сделали в первом примере, и обработчик событий позаботится обо всем для вас, когда событие произойдет/срабатывает, и оно обнаруживает его ,

источник

2015-03-21 23:20:48

Передача текста в функцию javascript

ответ

Смежные вопросы