鼠标监听器不能处理innerHTML和图库中的图像

Mouse listeners not working with innerHTML and images in a gallery

本文关键字：图像 监听器 不能 处理 innerHTML 鼠标      更新时间：2023-09-26

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

如果有人能帮忙，我将不胜感激。

好了。

 <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. 删除a;server()
  2. 将方法重命名为server1()，因为变量被命名为server。

将关闭标签<span>改为</span>

在调用方法allInOne()之前移动了所有的++和——操作。

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

，它工作良好。请现在测试

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

看一下这个jsfiddle的例子，看看你是否可以把它应用到你的代码中

试试下面的

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

您需要删除当前位于行尾的分号:

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

相关文章：