Mouse listeners not working with innerHTML and images in a gallery

StackOverflow https://stackoverflow.com/questions/8321642

Question

Basically, for this snippet of code, I would like to get the picture to show when clicked on, as shown by my onmousedown function. But for some reason, when I click on the picture, it does not show the picture that I have called in my server() function. In addition to that, my counters (the buttons) do not work as they are supposed to (add and subtract).

<!-- HTML header and stylesheets -->

memory = 0;
hdd = 0;
usb = 0;
server = "";

function allInOne()
{
    document.getElementById("memory").innerHTML = memory;
    document.getElementById("hdd").innerHTML = hdd;
    document.getElementById("usb").innerHTML = usb;
}

function server();
{
    div = document.getElementById("server");
    div.innerHTML = "<img src = 'server1.png' />";
}

<!-- omitted some HTML -->

    <span> Memory (GB) <span>
    <button onmousedown="allInOne();memory++">+</button>
    <article id = "memory">0</article>
    <button onmousedown="allInOne();memory--">-</button>
    <br />
    <span> HDD (GB) </span>
    <button onmousedown="allInOne();hdd++">+</button>
    <article id = "hdd">0</article>
    <button onmousedown="allInOne();hdd--">-</button>
    <br />
    <span> USB Ports </span>
    <button onmousedown="allInOne();usb++">+</button>
    <article id = "usb">0</article>
    <button onmousedown="allInOne();usb--">-</button>
    <br />

    <span class = "button" onmousedown="mac"> Mac OS X </span>
    <span class = "button" onmousedown="linux"> Linux </span>
    <span class = "button" onmousedown="windows"> Windows </span>

    <br />

    <img src = "server1.png" onmouseover="server();" />
    <img src = "laptop.jpg" />
    <img src = "0009-03_lenovo_pc.jpg"/>

<!-- some more HTML below -->

If anyone could help it would be greatly appreciated.

Was it helpful?

Solution

Okay here you go.

 <script type = "text/javascript">
          memory = 0;
          hdd = 0;
          usb = 0;
          server = "";

          function allInOne()
          {
              document.getElementById("memory").innerHTML = memory;
              document.getElementById("hdd").innerHTML = hdd;
              document.getElementById("usb").innerHTML = usb;
          }

          function server1()
          {
              var div_server = document.getElementById("server");
              div_server.innerHTML = "<img src = 'i_icon.gif' />";
          }

        </script>
  1. removed a ; which was present after function server()
  2. renamed the method to server1() since a variable is there named server.

change closing tag <span> to </span>

moved all the ++ and -- operation before calling the methid allInOne().

changed all the event to onclick. I have used a different image from system.

and it working fine. please test now

OTHER TIPS

It's better and more efficient to add event listeners from your javascript. Every onmousedown, onclick etc. triggers an eval action. There are 2 ways to add an event listener to a HTML element: [element].on[action] = [some function] or using the addEventListener/attachEvent method of a html element.

Have a look at this jsfiddle example to see if you can apply that to your code

Try the following

<!DOCTYPE html>

<html>
<head>
    <title> Javascript </title>
        <link rel = "stylesheet" type = "text/css" href = "css.css">
            <script type = "text/javascript">
            memory = 0;
            hdd = 0;
            usb = 0;
            server = "";

            function allInOne()
            {
            document.getElementById("memory").innerHTML = memory;
            document.getElementById("hdd").innerHTML = hdd;
            document.getElementById("usb").innerHTML = usb;

            }

            function server()
            {
            div = document.getElementById("server");
            div.innerHTML = "<img src = 'server1.png' />";
            }
            function changeText(id)
            {
                if(id == 'mac')
                {
                txt = document.getElementById("mac");
                txt.innerHTML = "mac";
                }
                else if(id =='linux' )
                {
                txt = document.getElementById("linux");
                txt.innerHTML = "linux";
                }
                else
                {
                txt = document.getElementById("windows");
                txt.innerHTML = "windows";
                }
            }


        </script>

</head>
<body>

    <div>
        <span> Memory (GB) <span>
            <button onmousedown="allInOne();memory++">+</button>
                <article id = "memory">0</article>
            <button onmousedown="allInOne();memory--">-</button>
                <br />
        <span> HDD (GB) </span>
            <button onmousedown="allInOne();hdd++">+</button>
                <article id = "hdd">0</article>
            <button onmousedown="allInOne();hdd--">-</button>
                <br />
        <span> USB Ports </span>
            <button onmousedown="allInOne();usb++">+</button>
                <article id = "usb">0</article>
            <button onmousedown="allInOne();usb--">-</button>
                <br />


        <span class = "button" onmousedown="changeText(this.id);" id="mac"> Mac OS X </span>
        <span class = "button" onmousedown="changeText(this.id);" id="linux"> Linux </span>
        <span class = "button" onmousedown="changeText(this.id);" id="windows"> Windows </span>

                <br />

        <img src = "server1.png" onmouseover="server();" />
        <img src = "laptop.jpg" />
        <img src = "0009-03_lenovo_pc.jpg"/>

                <br />

        <div id = "server"></div>





    </div>


</body>
</html>




You did one mistake while declaring the function with ; like the following
 function server();
{
}

You need to remove the semicolon currently on the end of the line:

function server();

Regarding the buttons: you don't actually say what is wrong with your add/subtract button behaviour but I'm guessing the problem is that you update the display first via the allInOne() function and then increment or decrement after that.

Instead of saying:

onmousedown="allInOne();memory++"

Try:

onmousedown="memory++;allInOne();"
// or, unless you have a specific reason for using mousedown rather than click
onclick="memory++;allInOne();"
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top