JavaScript更改图像源不持久

JavaScript changing image source not persisting

本文关键字：不持久 图像 JavaScript      更新时间：2023-09-26

当图像被点击时，我必须更改图像源。问题是图像仅在函数执行期间更改，但在执行后立即恢复到其初始值!!

这是我到目前为止所做的:

<head>
<title></title>
<script type="text/javascript">
    function cardMouseClick(obj) {
        el = document.getElementById(obj);
        el.src = "image2.jpg";
    alert("Hello!");        
    }
</script>
</head>
<body>
<form id="form1">
   <input type="image" id="b1" src="image1.jpg"  
      onclick="cardMouseClick('b1')"/>
</form>
</body>

image2适时显示，同时弹出警告窗口等待用户点击OK。然后它恢复到image1!

为什么?

你必须防止页面重新加载:

<form id="form1">
   <input type="image" id="b1" src="image1.jpg"  
      onclick="cardMouseClick('b1'); return false;"/>
</form>

因为它在提交表单。return false from cardMouseClick(...)

你可以这样做。

        <head>
        <title></title>
        <script type="text/javascript">
              function cardMouseClick(obj) {
                    el = document.getElementById(obj);
                    el.src = "image2.jpg";
                    alert("Hello!");
                    return false;          
                   }
        </script>
       </head>
       <body>
       <form id="form1">
          <input type="image" id="b1" src="image1.jpg"  
            onclick="cardMouseClick('b1')"/>
       </form>
相关文章：