Can't change Image during onclick event in javascript

Question

I have added image & button dynamically to a webpage. I wrote a "onclick" event, by which the image will be changed on clicking respective button. But the code doesn't work.

My code is;

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

Try using JQuery, it makes using Javascript a breeze, along with HTML DOM manipulation! — Callum Linington
– Callum Linington, Commented Jul 4, 2013 at 14:31
have you got an element with id of body or are you refering to <body> tag — Callum Linington
– Callum Linington, Commented Jul 4, 2013 at 14:36

Fenton · Accepted Answer · 2013-07-04 14:38:31Z

2

You are adding an event to...

boton.onclick

But I think your variable is named buton - so you need to use:

buton.onclick

Also, as this is running in the loop, you probably want to add the onclick event to each one you create (so put the event binding inside the loop).

Here is a running version of the script:

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

You can see it running on JSFiddle.

edited Jul 4, 2013 at 14:38

answered Jul 4, 2013 at 14:28

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Callum Linington Over a year ago

you really need to check your spellings, and try and be as accurate as possible!

Fenton Over a year ago

@user2546074 check out the fully working example I have added to my answer - it has the spellings fixed, moves the event binding to inside the loop and uses function-scope to make it easier to target just the image in the same table row.

Denys Séguret · Accepted Answer · 2013-07-04 14:28:24Z

0

getElementsByClassName returns a collection, not a single element.

You may do this :

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

But it would be probably cleaner to give an id to your image and use getElementById.

Note also that you seem to hesitate on the spelling of botón/boton/buton and that will make it hard for the code to work. You should see errors in the console.

answered Jul 4, 2013 at 14:28

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

2 Comments

msg Over a year ago

sorry.It's buton.onclick = function()

Denys Séguret Over a year ago

@user2546074 you have other occurrences of the same error, like td.appendChild(botón);.

user2550807 · Accepted Answer · 2013-07-04 14:38:18Z

0

There boton has an accent the first time you use it...and why are you using a for loop? I think an array of images could work and every time you click it increments a counter which changes the image. Also use .jpg not .jpeg

edited Jul 4, 2013 at 14:38

answered Jul 4, 2013 at 14:29

user2550807

906 bronze badges

Comments

user2550807 · Accepted Answer · 2013-07-04 14:59:08Z

This is closer to the original -- I just removed the for loop because I didn't see the need for it...

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

Collectives™ on Stack Overflow

Can't change Image during onclick event in javascript

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related