0

我已将图像和按钮动态添加到网页。我写了一个“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>
4

4 回答 4

2

您正在将事件添加到...

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

您可以看到它在 JSFiddle 上运行。

于 2013-07-04T14:28:26.357 回答
0

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，这将使代码难以工作。您应该会在控制台中看到错误。

于 2013-07-04T14:28:24.547 回答
0

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

于 2013-07-04T14:29:59.287 回答
0

这更接近原始版本——我刚刚删除了 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>
于 2013-07-04T14:59:08.910 回答