How do I change an image with javascript without an onclick event?

Question

I'm trying to get a dummy username and profile picture to display at random, at a random interval. I also want the usernames to match their respective profile pictures.

I currently I have html that displays the usernames correctly
<p id="usr"></p>
<img id="changeimage" src="" alt="Profile picture">

And javascript like this

var players = ['player1', 'player2', 'player3']
var playerpics = ['player1.jpg', 'player2.jpg', 'player3.jpg'];


var activeuser;
var playerpicker = function (activeuser) {
    usr.innerHTML = players[activeuser];
    changeimage.innerHTML = "<img src='" + playerpics[activeuser] + "' />";

};

setInterval(function () {
    var oneintwelve = Math.floor(Math.random() * 12);

    if (oneintwelve === 3) {
        activeuser = Math.floor(Math.random() * 3);
        playerpicker(activeuser);

    };
}, 1000);

I know I'm doing something wrong with implementing the new IMG tag, forgive me if I'm not doing this the best way, I'm fairly new to this. Thanks for the help.

eval is evil. eval is evil. eval is evil. eval is evil. eval is evil. eval is evil. eval is evil. ;( — user1467267
– user1467267, Commented Sep 5, 2014 at 21:32
@Allendar Without doubt you're right, but how is that evil related to the question? Or was it wiped out within the grace period? — Teemu
– Teemu, Commented Sep 5, 2014 at 21:37
instead changing with inner html, just fetch the image tag with javascript and change the src of the image like $('image').src='a.jpg' — Surendra Bobba
– Surendra Bobba, Commented Sep 5, 2014 at 21:38

Radu Bogdan · Accepted Answer · 2014-09-05 21:35:33Z

1

You're almost there, you can change the src attribute of an image. Also you didn't quite correctly selected the elements.

var playerpicker = function (activeuser) {
    document.getElementById("usr").innerHTML = players[activeuser];
    document.getElementById("changeimage").src= playerpics[activeuser];
};

Check this link, it will help you learn http://www.w3schools.com/jsref/dom_obj_select.asp

answered Sep 5, 2014 at 21:35

Radu Bogdan

5042 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

How do I change an image with javascript without an onclick event?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related