Слушатели мыши не работают с innerHTML и изображениями в галерее - PullRequest
1 голос
/ 30 ноября 2011

По сути, для этого фрагмента кода я бы хотел, чтобы при нажатии на него отображалась картинка, как показано моей функцией onmousedown.Но по какой-то причине, когда я нажимаю на изображение, оно не показывает изображение, которое я вызвал в своей функции server().Кроме того, мои счетчики (кнопки) не работают так, как они должны (складывать и вычитать).

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

Если кто-то может помочь, это будет очень признательно.

Ответы [ 4 ]

1 голос
/ 30 ноября 2011

Лучше и эффективнее добавлять прослушиватели событий из вашего javascript. Каждое onmousedown, onclick и т. Д. Запускает действие eval. Существует два способа добавить прослушиватель событий в элемент HTML: [element].on[action] = [some function] или с помощью метода addEventListener / attachEvent элемента html.

Посмотрите на этот пример jsfiddle , чтобы увидеть, можете ли вы применить это к своему коду

1 голос
/ 30 ноября 2011

Хорошо, вот, пожалуйста.

 <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. удалено; который присутствовал после функции server()
  2. переименовал метод в server1(), поскольку там есть переменная с именем server.

изменить закрывающий тег <span> на </span>

переместил все операции ++ и - перед вызовом метида allInOne ().

изменил все события на onclick. Я использовал изображение, отличное от системного.

и работает нормально. пожалуйста, проверьте сейчас

0 голосов
/ 30 ноября 2011

Вам нужно удалить точку с запятой, которая в данный момент находится в конце строки:

function server();

Что касается кнопок: вы на самом деле не говорите, что не так с вашим поведением кнопок добавления / вычитания, но яПредполагается, что проблема заключается в том, что сначала вы обновляете отображение с помощью функции allInOne(), а затем увеличиваете или уменьшаете ее.

Вместо того, чтобы говорить:

onmousedown="allInOne();memory++"

Попробуйте:

onmousedown="memory++;allInOne();"
// or, unless you have a specific reason for using mousedown rather than click
onclick="memory++;allInOne();"
0 голосов
/ 30 ноября 2011

Попробуйте следующее

<!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();
{
}
...