I have javascript that I want to use to build up a dynamic array: the user clicks on one or more images and when clicking the Show button, the list of image names is displayed that the user clicked.
<script type="text/javascript">
var images = [];
images[1] = "http://www.unix.com/images/image01.jpg";
images[2] = "http://www.unix.com/images/image02.jpg";
images[3] = "http://www.unix.com/images/image03.jpg";
images[4] = "http://www.unix.com/images/image04.jpg";
for (var i in images)
document.write('<input name="myImage' + i + '" id="myImage' + i + '" type="image" src=' + images + ' alt="Add me..." onclick="add();" />');
var arr = [];
function add() {
var inp = document.getElementById('myImage1');
arr.push('myImage1');
inp.value = '';
}
function show() {
document.getElementById('container').innerHTML = arr;
}
</script>
<input type="button" onclick="show();" value="show" />
<div id="container"></div>
The code has a function add() which is obviously wrong, but has at least a sample value to show what happens when an image is clicked and subsequently the Show button.
How do I correct the code to only show the names of the images that the user clicked?
SOLVED:
<script type="text/javascript">
var images = [];
images[1] = "images/image01.jpg";
images[2] = "images/image02.jpg";
images[3] = "images/image03.jpg";
images[4] = "images/image04.jpg";
for (var i in images)
document.write('<input name="myImage' + i + '" id="myImage' + i + '" type="image" src=' + images + ' alt="Add me..." onclick="arr.push(\'myImage' + i + '\')" />');
var arr = [];
function show() {
document.getElementById('container').innerHTML = arr;
}
</script>
<input type="button" onclick="show();" value="show" />
<div id="container"></div>