Question

请找到代码并提出建议。

我正在尝试添加另一张图片（＆＃39; correct10.png＆＃39;）onClick显示图片的事件，即Van.png＆＃39;。但没有任何事情发生，所以请建议。

这里是html：

<!DOCTYPE html >
<html lang="en">
<head>
<title>Adding Another Image onClick</title>
<script>
function doImgSwap()
{
document.getElementById('newImg').addEventListener('click', function(e){
var img = document.createElement('img');
img.setAttribute('src','correct10.png');
e.target.appendChild(img);
});
}
</script>
</head>
<body>
<p><a href="#" id="newImg" onClick="doImgSwap()"><img src="van.png"></a></p>
</body>
</html>

Answer 1

您的代码应为

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Adding Another Image onClick</title>
        <script>
            window.onload = function() {
                document.getElementById('newImg').addEventListener('click', function(e) {
                    var img = document.createElement('img');
                    img.setAttribute('src', 'correct10.png');
                    this.appendChild(img);
                });
            }
        </script>
    </head>

    <body>
        <p>
            <a href="#" id="newImg">
                <img src="van.png"/>
            </a>
        </p>
    </body>

</html>

Answer 2

首先将js文件放在你的html下，或者使用window.onload函数来确保

<!DOCTYPE html >
<html lang="en">
  <head>
    <title>Adding Another Image onClick</title>
  </head>
  <body>
     <p><a href="#" id="newImg" onClick="doImgSwap()"><img src="van.png"></a></p>
   <script>
 function doImgSwap()
{
document.getElementById('newImg').addEventListener('click', function(e){
var img = document.createElement('img');
img.setAttribute('src','correct10.png');
e.target.appendChild(img);
});
}
</script>
</body>
</html>

Answer 3

您的doImgSwap方法会创建一个事件处理程序，它实际上不会交换图像。

应该是：

function doImgSwap(el){
    var img = document.createElement('img');
    img.setAttribute('src','correct10.png');
    el.appendChild(img);
}

你必须传递onClick属性中的元素，就像这样

onClick="doImgSwap(this)"

这里是working jsfiddle of your code

使用Javascript添加另一个图像

3 个答案: