Need help creating a button to activate a javascript function

Question

This is my script, I am trying to make a button randomize the images instead of me having to press the refresh button. What exactly do I need to code the button as to make this work? My code I think I am confused on what my function name is? I had a lot of help creating this so I'm a bit lost on what to do as far as the button is. I've created a button and I've tried plugging in multiple things for the "onclick" but nothing works.

<!doctype html>
<html>

<head>
<SCRIPT LANGUAGE="JavaScript">

var theImages = new Array() 

theImages[0] = '<img class="atvi-image-image" alt=""src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png" title="" height="467" width="675">'
theImages[1] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png" title="" height="732" width="1084">'
theImages[2] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-extra-slots.png" title="" height="480" width="752">'
theImages[3] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-2025.png" title="" height="412" width="683">'



var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
(function () {
    var theImages = [{
        src: "winry doe.gif",
            width: "480",
            height: "270"
    }, {
        src: "WINRY WINK.gif",
        width: "500",
        height: "484"
    }, {
        src: "winry getting hugged.gif",
        width: "500",
        height: "205"
    },
        {
         src: "winry getting mad.gif",
         width: "500",
         height: "292"


    }];

    var preBuffer = [];
    for (var i = 0, j = theImages.length; i < j; i++) {
        preBuffer[i] = new Image();
        preBuffer[i].src = theImages[i].src;
        preBuffer[i].width = theImages[i].width;
        preBuffer[i].height = theImages[i].height;
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    window.getRandomImage = function () {
        var whichImage = getRandomInt(0, preBuffer.length - 1);
        return preBuffer[whichImage];
    }
})();

window.onload = function () {
    var newImage = getRandomImage();
    console.log(newImage);
    document.body.appendChild(newImage);
};
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
<form>
<input type="button" value="More Winry" onclick="">
</form>
</body>
</html>

Just to be certain, you want to show a random image each time a button is clicked right? — Awad Maharoof, Nov 12 '14 at 11:37
Does this currently actually work? but only shows you an initial image? and you want to use a button to show a different random image on a button click? — lee_gladding, Nov 12 '14 at 11:41
Yes, because right now I am currently pressing refresh and it loads a new image each time. I would just like to have the button load a random image each time Edit: Yes this currently works, I press refresh and it randomly displays 1 of 4 images. I want to click the button and have it do that instead of having to refresh — Bamblagram, Nov 12 '14 at 11:42
replacing or as well as the image already loaded on page load? — lee_gladding, Nov 12 '14 at 11:42
I mean, when you click the button do you want to replace the random image that is there, or load in another random image after it, so you would have both images in the page after one click, 3 after 2 clicks etc... — lee_gladding, Nov 12 '14 at 11:46

score 0 · Accepted Answer · edited May 23 '17 at 11:52

Just add :

function randomImage() {
var newImage = getRandomImage();
console.log(newImage);
document.body.appendChild(newImage);
};

and to the button onclick add:

<input type="button" value="More Winry" onclick="randomImage()">

EDIT To replace existing image:

function randomImage() {
 var newImage = getRandomImage();
 console.log(newImage);
 var img = document.getElementsByTagName('img').remove();
 document.body.appendChild(newImage);
};
Element.prototype.remove = function() {
 this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  for(var i = 0, len = this.length; i < len; i++) {
     if(this[i] && this[i].parentElement) {
        this[i].parentElement.removeChild(this[i]);
     }
   }
 }

add those function instead.

Credits to JavaScript: remove element by id

also, no need of JQuery in functions so JQuery tag is useless.

This works perfectly but not the way I wanted it to, I want the button to replace the current image with one of the other images — Bamblagram, Nov 12 '14 at 11:47

lee_gladding · Answer 2 · 2014-11-12T12:04:01.263

You can also use similar to this (as long as the img's have that class). Using the prototype method described by Edan Feiles answer

the button html:

<form>
   <input id="imageButton" type="button" value="More Winry" />
</form>

and the JS:

var button = document.getElementById("imageButton");

button.onclick = function() {
    var newImage = getRandomImage();
    console.log(newImage);
    document.getElementsByClassName("atvi-image-image").remove();
    document.body.appendChild(newImage);
};

or you can use what Edan Feiles said and just add this line to the function:

document.getElementsByClassName("atvi-image-image").remove();

before adding the new random image.

Need help creating a button to activate a javascript function

2 Answers2