Передача параметра функции скрипта

Question

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

на голове

<script> 
    function ledonoff(led) 
    { 
    if (document.getElementById('ck1').checked == true){ 
     document.getElementById('led1').style.backgroundImage="url('Image/led_green.gif')";} 
    else { 
     document.getElementById('led1').style.backgroundImage="url('Image/led_red.gif');} 
    } 
</script> 

на теле

<div id="led1"></div> 

<input name="" type="checkbox" id="ck1" onchange="ledonoff('led1')" value=""/> 

Я хотел бы иметь функцию ledonoff принимать 2 параметра, которые будут использоваться в функции: ДИВ идентификатор который должен быть изменен и флажок, который должен быть проверен на функции if. Может ли кто-нибудь помочь мне с этим. Спасибо

Answer 1

изменение функции для:

function ledonoff(led,checkBox){ 
     var theDiv = document.getElementById(led), 
      check = document.getElementById(checkBox); 
     if (check.checked == true){ 
     theDiv.style.backgroundImage="url('Image/led_green.gif')"; 
     } else { 
     theDiv.style.backgroundImage="url('Image/led_red.gif')"; 
     } 
    } 

и htmlonchange к:

"ledonoff('led1','ck1')" 

in jsbin

Answer 2

Вы можете просто передать его: onchange="ledonoff('led1', 'ck1')".

Однако ваша функция ожидает один аргумент, поэтому вам необходимо внести соответствующие поправки.

function ledonoff(led) -> function ledonoff(led, ck) 

Просто отметить

Этот тип JavaScript называется Obtrusive Javascript. Недавняя смена принципа дизайна заключается в том, чтобы ваш Javascript и ваш HTML полностью разделяли файлы. Вместо назначения функций событиям в атрибуте вы должны использовать DOM, чтобы добавить прослушиватели событий к DOM Элементам. Here - хороший учебник, чтобы вы начали с идеи.

Answer 3

Измените код:

<script> 
function ledonoff(isChecked, elementId) 
{ 
if (isCkecked){ 
    document.getElementById(elementId).style.backgroundImage="url('Image/led_green.gif')";} 
else { 
    document.getElementById(elementId).style.backgroundImage="url('Image/led_red.gif');} 
} 
</script> 

И Органом:

<input name="" type="checkbox" id="ck1" onchange="ledonoff(this.checked, "led1")" value=""/>Led 1 

Answer 4

сделать это:

<script> 
function ledonoff(led,checkbox){ 
    if(document.getElementById(checkbox).checked == true){ 
    document.getElementById(led).style.backgroundImage="url('Image/led_green.gif')"; 
    }else{ 
    document.getElementById(led).style.backgroundImage="url('Image/led_red.gif')"; 
    } 
} 
</script> 

и ваш HTML:

<div id="led1"></div> 
<input name="" type="checkbox" id="ck1" onchange="ledonoff('led1','ch1')" value=""/>Led1 

я думаю, thats it. Я предполагаю, что ваши пути изображения верны.

Answer 5

использования этого.

</script> 
function ledonoff(led,chk) 
{ 
    if (document.getElementById(chk).checked == true){ 
    document.getElementById(led).style.backgroundImage="url('Image/led_green.gif')";} 
    else { 
    document.getElementById(led).style.backgroundImage="url('Image/led_red.gif');} 
    } 
</script> 


<div id="led1"></div> 

<input name="" type="checkbox" id="ck1" onchange="ledonoff('led1','ck1')" value=""/>Led 1