Alternative to document.write to replace image on page?

Hello,
I’m trying to have a “click” event that replaces an image on the page with a new image that has been selected randomly from an array. I have solved PART of this already (can get the random image to appear). However, instead of appearing on the page where the old image was, the new image appears in a blank page.

My research indicates that this “blank page location”-problem is a result of using “document.write” in the Function. Therefore, I know I need to find a different way to accomplish this, but am failing miserably. I have been trying for hours and hours and HOURS to figure out proper syntax for accomplishing this via elements, functions, variables and mootools. I am literally going INSANE and am DESPERATELY hoping someone out there will help me!!! Thank you in advance for your support :>)

A bit of my research:

* I found this---but haven’t figured out how to implement it in my scenario:

document.addEvent( ‘domready’ , function() {
$(‘my_element’).addEvent( ‘click’ , function() { alert(‘test’); } );
});

Source: http://cssgallery.info/a-beginners-mootools-add-events/

* I found this---but haven’t figured out how to implement it in my scenario:
$('myNewElement').replaces($('myOldElement'));

Source:  http://mootools.net/docs/core/Element/Element




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ChristmasSweaterFUN.com | Home of the Christmas Sweaterizer App & Christmas Sweater Generator</title> <script type="text/JavaScript"> // Set up the image files to be used. var theImages = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. Rememeber // to increment the theImages[x] index! theImages[0] = 'christmas-sweater-output-bacon.png' theImages[1] = 'christmas-sweater-output-martini.png' theImages[2] = 'christmas-sweater-output-kitty-litter.png' theImages[3] = 'christmas-sweater-output-spatula.png' theImages[4] = 'christmas-sweater-output-eiffel.png' theImages[5] = 'christmas-sweater-output-cotton-candy.png' // ====================================== // do not change anything below this line // ====================================== /////////////// 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 showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } </script> <style type="text/css"> <!-- body,td,th {    font-size: 14px;    color: #000; } body {    background-color: #FFF; } a:link {    color: #090;    text-decoration: none; } a:visited {    text-decoration: none;    color: #0F0; } a:hover {    text-decoration: underline; } a:active {    text-decoration: none; } #container {    height: 800px;    width: 770px;    margin-right: auto;    margin-left: auto;    position: relative; } </style> <link href="fontstyle.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- #navbar {    position:absolute;    left:1px;    top:51px;    width:770px;    height:52px;    z-index:1;    background-image: url(images/nav-background.jpg); } #heading {    position:absolute;    left:112px;    top:15px;    width:770px;    height:68px;    z-index:1;    font-family: 3dumb, Georgia, sans-serif;    font-size: 36px; } #bottombar {    position:absolute;    left:0px;    top:757px;    width:770px;    height:44px;    z-index:2;    background-image: url(images/green-bottom.jpg); } #com {    position:absolute;    left:552px;    top:10px;    width:90px;    height:41px;    z-index:1; } #page-headline {    position:absolute;    left:2px;    top:102px;    width:770px;    height:40px;    z-index:3; } #test {    position:absolute;    left:0px;    top:210px;    width:769px;    height:182px;    z-index:4; } #apDiv2 {    position:absolute;    left:0px;    top:179px;    width:403px;    height:579px;    z-index:4; } #funnypicplace {    position:absolute;    left:403px;    top:178px;    width:367px;    height:439px;    z-index:5; } #apDiv3 {    position:absolute;    left:403px;    top:178px;    width:367px;    height:439px;    z-index:5; } --> </style> </head> <body> <div id="container">  <div id="bottombar"></div>  <div id="page-headline">    <h3>Page Headline Goes Here</h3>  </div>  <div id="apDiv2"><img src="ChristmasSweaterFUN_iWeb/ChristmasSweaterFUN_iWeb/christmas_sweater_GENERATOR_files/christmas-sweater-generator-animation.gif" width="403" height="579" /></div>    <div id="apDiv3"><img onClick="showImage()" width="367" height="439"/></div> </div> <div id="heading">  <h2>ChristmasSweaterFUN.</h2>  <div id="com">  <img src="images/com.jpg" width="90" height="41" /> </div> </div> </body> </html>

To replace an image in the page with another image you just need to give the original image a name or an id in the HTML.

If you gave the image an id of ‘imgswap’ then the JavaScript to replace that image with another image when someone clicks on the image is:

document.getElementById('imgswap').onclick =
function() {document.getElementById('imgswap').src = 'newimage.gif';}