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>

Answer 1

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.

Answer 2

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

Question

2 answers

solution1
0 ACCPTED 2014-11-12 11:44:07

solution2
0 2014-11-12 11:51:09

Need help creating a button to activate a javascript function

Question

2 answers

solution1 0 ACCPTED 2014-11-12 11:44:07

solution2 0 2014-11-12 11:51:09

solution1
0 ACCPTED 2014-11-12 11:44:07

solution2
0 2014-11-12 11:51:09