Fatal编程技术网
  • javascript/
  • Javascript 鼠标侦听器无法处理库中的innerHTML和图像

Javascript 鼠标侦听器无法处理库中的innerHTML和图像

javascript html image

Javascript 鼠标侦听器无法处理库中的innerHTML和图像,javascript,html,image,gallery,mouselistener,Javascript,Html,Image,Gallery,Mouselistener,基本上，对于这段代码，我希望在单击时显示图片，如我的onmousedown函数所示。但由于某些原因，当我单击图片时，它不会显示我在server（）函数中调用的图片。除此之外，我的计数器（按钮）不能按预期工作（加法和减法） 内存=0； 硬盘驱动器=0； usb=0； 服务器=”； 函数allInOne（） { document.getElementById（“内存”）.innerHTML=内存； document.getElementById（“hdd”）.innerHTML=hdd； docu

基本上，对于这段代码，我希望在单击时显示图片，如我的
onmousedown
函数所示。但由于某些原因，当我单击图片时，它不会显示我在
server（）
函数中调用的图片。除此之外，我的计数器（按钮）不能按预期工作（加法和减法）


内存=0；
硬盘驱动器=0；
usb=0；
服务器=”；
函数allInOne（）
{
document.getElementById（“内存”）.innerHTML=内存；
document.getElementById（“hdd”）.innerHTML=hdd；
document.getElementById（“usb”）.innerHTML=usb；
}
函数服务器（）；
{
div=document.getElementById（“服务器”）；
div.innerHTML=“”；
}
内存（GB）
+
0
-


硬盘驱动器（GB）
+
0
-


USB端口
+
0
-


MacOSX
Linux
窗户
如果有人能帮忙，我们将不胜感激。

好的，给你

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


内存=0；
硬盘驱动器=0；
usb=0；
服务器=”；
函数allInOne（）
{
document.getElementById（“内存”）.innerHTML=内存；
document.getElementById（“hdd”）.innerHTML=hdd；
document.getElementById（“usb”）.innerHTML=usb；
}
函数server1（）
{
var div_server=document.getElementById（“服务器”）；
div_server.innerHTML=“”；
}
  • 删除了一个；在函数
    server（）之后出现的
  • 将该方法重命名为
    server1（）
    ，因为其中有一个名为server的变量
    • 将结束标记
    更改为

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

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

    它工作得很好。请立即测试

    尝试以下操作

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

    
Javascript
内存=0；
硬盘驱动器=0；
usb=0；
服务器=”；
函数allInOne（）
{
document.getElementById（“内存”）.innerHTML=内存；
document.getElementById（“hdd”）.innerHTML=hdd；
document.getElementById（“usb”）.innerHTML=usb；
}
函数服务器（）
{
div=document.getElementById（“服务器”）；
div.innerHTML=“”；
}
函数changeText（id）
{
如果（id='mac'）
{
txt=document.getElementById（“mac”）；
txt.innerHTML=“mac”；
}
else if（id='linux'）
{
txt=document.getElementById（“linux”）；
txt.innerHTML=“linux”；
}
其他的
{
txt=document.getElementById（“windows”）；
txt.innerHTML=“windows”；
}
}
内存（GB）
+
0
-

    
硬盘驱动器（GB）
+
0
-

    
USB端口
+
0
-

    
MacOSX
Linux
窗户

    

    
您在声明函数时犯了一个错误；像下面这样
函数服务器（）；
{
}
    您需要删除当前行末尾的分号：

    function server();
    关于按钮：您实际上并没有说添加/减去按钮的行为有什么问题，但我猜问题在于您首先通过
    allInOne（）
    函数更新显示，然后再递增或递减

    而不是说：

    onmousedown="allInOne();memory++"
    尝试：

    从javascript添加事件监听器更好、更高效。每次按下鼠标时，都会触发
    eval
    操作。向HTML元素添加事件侦听器有两种方法：
    [element]。在[action]=[some function]
    上或使用HTML元素的
    addEventListener
    /
    attachEvent
    方法

    请查看是否可以将其应用到代码中

    您好，欢迎使用StackOverflow。你的问题有更好的机会被回答，如果a）你的标题更具描述性，b）你的代码出现在简要介绍和/或问题细节之后-这些都显示在问题列表中-c）你尝试让代码尽可能短，以便分析；d）你添加搜索关键字，使问题在更多查询中显示。我现在为您做了这件事，所以e）请不要还原其他用户的编辑，除非它们有问题。分号部分我已经修复，但仍然没有帮助。谢谢你关于onclick和切换语法的提示。仅仅复制/粘贴一段代码并不是一个好的答案。你可以只说“有一个；缺少”，没有完整的引用-这会更容易阅读。weltraumpirat在下面我提到的只是看到那里，我改变了一些东西我你的代码复制代码我发布和看到的…这就是问题：解释你改变了什么，而不是仅仅粘贴代码。没有人会通读整本书，是你不懂。我只是编辑了这个问题，不是我的代码。我支持我上面所说的一切：这个网站的目的是创建一个问答式的知识库。你的回答不会帮助任何人，除非你解释你做了什么以及为什么。湿婆：看看上面@KooiInc的回答。这就是一个好的答案应该是什么样的：简短、准确、有洞察力，并向OP展示解决问题的方法，而不仅仅是提供解决问题的方法。P 
    onmousedown="allInOne();memory++"

    onmousedown="memory++;allInOne();"
// or, unless you have a specific reason for using mousedown rather than click
onclick="memory++;allInOne();"