Question

基本上，对于这段代码，我希望在点击时显示图片，如我的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 -->

如果有人能提供帮助，我们将不胜感激。

Answer 1

好的，你走了。

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

删除了;在函数server()
将方法重命名为server1()，因为变量名为server。

将结束标记<span>更改为</span>

在调用methid allInOne（）之前移动了所有++和 - 操作。

将所有事件更改为onclick。我使用了与系统不同的图像。

它工作正常。请立即测试

Answer 2

从javascript添加事件侦听器会更好，更有效。每个onmousedown，onclick等都会触发eval次操作。有两种方法可以将事件侦听器添加到HTML元素：[element].on[action] = [some function]或使用html元素的addEventListener / attachEvent方法。

查看this jsfiddle example，了解您是否可以将其应用于您的代码

Answer 3

尝试以下

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

Answer 4

您需要删除当前行末的分号：

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();"

鼠标侦听器不使用innerHTML和图库中的图像

4 个答案: