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.

Answer 1

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