use one function to different elements javascript

Question

I'm new in JavaScript and I'm tring to find out how I can use the same function to different elements in JavaScript.

I.e. how to set the id value for document.getElementById in the function. I do not know why my code does't work.

JavaScript

function onhover(imgx)
{
    var x = imgx;
    document.getElementById('x').style.opacity=0.5;
}

HTML

<img id="img1" src="img1.jpg" onmouseout="onhover('img1')">
<img id="img2" src="img2.jpg" onmouseout="onhover('img2')">

Fabrizio Calderan · Accepted Answer · 2012-07-02 10:20:27Z

3

premising that all handlers should never be defined inside markup (for the sake of separation between logic and contents) , try this

<img id="img1" src="img1.jpg" onmouseout="onhover(this)">
<img id="img2" src="img2.jpg" onmouseout="onhover(this)">

function onhover(img) {
   img.style.opacity=0.5;
}

answered Jul 2, 2012 at 10:20

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

Comments

Anthony Grist · Accepted Answer · 2012-07-02 10:21:34Z

1

Make a trivial change to your code - remove the single quotes around x. When you use single- or double-quotes, you're passing the string "x" rather than the value of the variable x.

function onhover(imgx)
{
    var x = imgx;
    document.getElementById(x).style.opacity=0.5;
}

Though, to be honest, you could just use imgx straight away; saving it into x is a bit unnecessary.

answered Jul 2, 2012 at 10:21

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

2 Comments

Anthony Grist Over a year ago

@Alnitak Honestly I didn't make the connection that the ID being passed to the function was the ID of the element triggering the function. In that case, this would be the better option.

Alnitak Over a year ago

well, it is, but only if you actually pass it as a parameter (for DOM0 inline handlers). For proper DOM3 (and jQuery) it's implicit.

gaurang171 · Accepted Answer · 2012-07-02 11:05:13Z

0

I have created codebin for you please check using below link.

http://codebins.com/codes/home/4ldqpcc

answered Jul 2, 2012 at 11:05

gaurang171

9,1104 gold badges31 silver badges30 bronze badges

Collectives™ on Stack Overflow

use one function to different elements javascript

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related