0

画像とボタンを Web ページに動的に追加しました。それぞれのボタンをクリックすると画像が変更される「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

これはオリジナルに近いです -- 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 に答える
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 に答える