Javascript function not working for all elements

Question

I'm trying to write a script which changes image on mouse hover. I have 6 images, but the function is working for only one of them (the first one)

<div id="picture-container">
    <img class="picture" id="360" src="360.jpg" onclick="enlarge(360);"  onmouseover="pic_info(360);"
    onmouseout="pic_ret(360);"/>
    <img class="picture" id="bmx" src="bmx.jpg" onclick="enlarge(bmx);"/>
    <img class="picture" id="buzludzha" src="buzludzha.jpg" onclick="enlarge(buzludzha);"
    onmouseover="pic_info(buzludzha);"/>
    <img class="picture" id="pirata" src="pirata.jpg" onclick="enlarge(pirata);"
    onmouseover="pic_info(pirata);"/>
    <img class="picture" id="snowboard" src="snowboard.jpg" onclick="enlarge(snowboard);"
    onmouseover="pic_info(snowboard);"/>
    <img class="picture" id="vitiskali" src="vitiskali.jpg" onclick="enlarge(vitiskali);"
    onmouseover="pic_info(vitiskali);"/>
    <img class="picture" id="ispolin" src="ispolin.jpg" onclick="enlarge(ispolin);"
    onmouseover="pic_info(ispolin);"/>

</div>

And the script:

function pic_info(id) {

if (id == "360") {
    var p = document.getElementById(id);
    p.src = "360info.jpg";
}
if (id == "buzludzha") {
    var p = document.getElementById(id);
    p.src = "buzludzhainfo.jpg";
}
if (id == "pirata") {
    var p = document.getElementById(id);
    p.src = "piratainfo.jpg";
}
if (id == "snowboard") {
    var p = document.getElementById(id);
    p.src = "snowboardinfo.jpg";
}
if (id == "vitiskali") {
    var p = document.getElementById(id);
    p.src = "vitiskaliinfo.jpg";
}
if (id == "ispolin") {
    var p = document.getElementById(id);
    p.src = "ispolininfo.jpg";
}

As I said the script works only for picture with id="360" and it is imported in the head tag of the html document.The same thing happens with the function "enlarge();". Why is that and how can I fix it? Thank you, in advance!

Can I suggest a rewrite of your code? Something along the lines of: function pic_info(id){var p = document.getElementById(id); var src = id + "info.jpg"; p.src = src; }, much easier to read and extend to new functionality. — scragar
– scragar, Commented Sep 22, 2014 at 12:03
Not exactly related, but a single var p = document.getElementById(id); would had been enough, you don't need six of them ... — Teemu
– Teemu, Commented Sep 22, 2014 at 12:03
drop those if statements ... use a switch statement instead: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — henser
– henser, Commented Sep 22, 2014 at 12:04

ovi · Accepted Answer · 2014-09-22 12:00:01Z

7

just to scratch the surface, are passing a variable instead of a string : enlarge(bmx); should be : enlarge('bmx');, and so on for the others

answered Sep 22, 2014 at 12:00

ovi

5761 gold badge4 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Javascript function not working for all elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related