Pass parameter to a script function

Question

I'm a beginner on this so please be patient with me. I have look up this problem and did not found a solution. I have the following code:

on the head

<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>

on the body

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

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

I will like to have the function ledonoff take 2 parameters to be used in function : div id to be changed and checkbox that is to be verified on the if of the function. Can anyone help me with this. Thank you

</script> at the beginning? That's probably the source of the problem. — Alvin Wong
– Alvin Wong, Commented Apr 13, 2013 at 8:23
Take a look at arguments.length, I think this is your want if you want to overload that function. — OQJF
– OQJF, Commented Apr 13, 2013 at 8:25

user2264587 · Accepted Answer · 2013-04-13 08:33:31Z

1

change the function to:

  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')";
      }
    }

and the htmlonchange to:

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

in jsbin

answered Apr 13, 2013 at 8:33

user2264587

4742 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saeed Afshari · Accepted Answer · 2013-04-13 08:33:15Z

1

Modify your code to:

<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>

And The body to:

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

answered Apr 13, 2013 at 8:33

Saeed Afshari

9491 gold badge9 silver badges17 bronze badges

1 Comment

atondelier Over a year ago

Quite shorter with document.getElementById(elementId).style.backgroundImage = "url('Image/led_" + (isChecked ? "green" : "red") + ".gif')";

christopher · Accepted Answer · 2013-04-13 08:27:51Z

0

You can simply pass it: onchange="ledonoff('led1', 'ck1')".

However your function is expecting one argument, so you need to amend that.

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

Just to note

This type of JavaScript is called Obtrusive Javascript. The recent shift in design principle is to have your Javascript and your HTML in completely separate files. Instead of assigning functions to events in an attribute fashion, you should use the DOM to add event listeners to DOM Elements. Here is a good tutorial to get you started on the idea.

answered Apr 13, 2013 at 8:27

christopher

27.4k6 gold badges59 silver badges90 bronze badges

Comments

doniyor · Accepted Answer · 2013-04-13 08:33:29Z

0

do this:

<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>

and your html:

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

i think, thats it. i assume your image paths are correct.

answered Apr 13, 2013 at 8:33

doniyor

38k62 gold badges183 silver badges272 bronze badges

Comments

Bharat Chodvadiya · Accepted Answer · 2013-04-13 08:39:44Z

0

Use this.

</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

answered Apr 13, 2013 at 8:39

Bharat Chodvadiya

1,6484 gold badges20 silver badges31 bronze badges

Collectives™ on Stack Overflow

Pass parameter to a script function

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related