Question

我添加了图片＆amp;动态按钮到网页。我写了一个“onclick”事件，通过点击相应按钮可以更改图像。但是代码不起作用。

我的代码是;

 <style>
 .tableclass{
 height:80px;}
 .imgclass{
 height:50px;
 width:50px;} </style>
 <script>
 var img = new Image();
 img.src = "Images/circle.png";
 img.className = 'imgclass';

 window.onload = function init() {
 for(var i=0;i<5;i++)
 {
 var container = document.getElementById('body');
 var table = document.createElement('table');
 table.className = 'tableclass';
 var tr = document.createElement('tr');
 var td = document.createElement('td');
 var btn = document.createElement('input');
 btn.type = 'button';
 btn.className = 'buttonclass';
 td.appendChild(btn);
 td.appendChild(img);
 tr.appendChild(td);
 table.appendChild(tr);
 container.appendChild(table);
 }
 }
 btn.onclick = function(){
 document.getElementsByClassName('imgclass').src = "Images/square.jpeg";
 }; 
 </script>
 <body id="body"></body>

Answer 1

您正在向...添加活动

boton.onclick

但我认为你的变量名为buton - 所以你需要使用：

buton.onclick

此外，由于这是在循环中运行，您可能希望将onclick事件添加到您创建的每个事件中（因此将事件绑定放在循环中）。

以下是该脚本的运行版本：

function getImage() {
    var img = new Image();
    img.src = "Images/circle.png";
    img.className = 'imgclass';
    return img;
}

function getRow() {
    var img = getImage();
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    var buton = document.createElement('input');
    buton.type = 'button';
    buton.className = 'buttonclass';
    buton.onclick = function(){
        img.src = "Images/square.jpeg";
    };
    td.appendChild(buton);
    td.appendChild(img);
    tr.appendChild(td);
    return tr;
}

var container = document.getElementById('body');
var table = document.createElement('table');
table.className = 'tableclass';
for(var i = 0; i < 5 ; i++) {
    table.appendChild(getRow());
}

container.appendChild(table);

你可以see it running on JSFiddle。

Answer 2

getElementsByClassName返回一个集合，而不是单个元素。

你可以这样做：

var imgs = document.getElementsByClassName('imgclass');
for (var i=0; i<imgs.length; i++) imgs[i].src = "Images/square.jpeg";

但是，为您的图片提供ID并使用getElementById可能会更清晰。

另请注意，您似乎对botón / boton / buton的拼写犹豫不决，这将使代码难以运作。您应该看到错误in the console。

Answer 3

当你第一次使用它时，boton有一个重音......你为什么使用for循环？我认为一系列图像可以工作，每次点击它都会增加一个改变图像的计数器。也可以使用.jpg而不是.jpeg

Answer 4

这更接近原作 - 我刚刚删除了for循环，因为我没有看到它的需要......

<style>
.tableclass{
height:80px;}
.imgclass{
height:50px;
width:50px;} </style>
<script>

var count = 0;
var images = [];
images[0] = "Pictures/1.jpg";
images[1] = "Pictures/2.jpg";
images[2] = "Pictures/3.jpg";
images[3] = "Pictures/4.jpg";

var img = new Image();
img.src = images[count];
img.className = "imgclass";

window.onload = function init() {

var container = document.getElementById('body');
var table = document.createElement('table');
table.className = 'tableclass';
var tr = document.createElement('tr');
var td = document.createElement('td');
var button = document.createElement('input');
button.type = 'button';
button.className = 'buttonclass';
button.onclick = function(){buttonClick();}
td.appendChild(button);
td.appendChild(img);
tr.appendChild(td);
table.appendChild(tr);
container.appendChild(table);

}

function buttonClick(){
if(count < images.length - 1){
count++;
}else{
    count = 0;
}
img.src = images[count];
}; 
</script>
<body id="body"></body>

在javascript中的onclick事件期间无法更改图像

4 个答案: