Building an Image into a function

alans@uoregon.e · 02-17-2013, 03:03 AM

I'm a complete beginner to javascript and I'm curious what's wrong with my code. We need to make one original image appear, and then upon clicking two images need to appear that both simulate a die throw, so randomly being 1 through 6. Please help!

Code:

<!DOCTYPE html>
<head>
	<title>More Games</title>
	<script>
function SelectImages()
// Assumes: die images are in http://pages.uoregon.edu/alans/111/CIS%20111/images/
// Results: displays a randomly selected image of a 6-sided die
{
roll1 = Math.floor(Math.random() * 6) + 1;
imgName = '../images/die' + roll1 + '.gif';
document.getElementById('dieImage').src = imgName;

var dieImg2 = roll1 = '../images/die' + roll2 + '.gif';
var myNewTag = "<img id='dieImg2' alt='die Image' src='../images/die1.gif'>"
document.getElementById('dieImage').innerHTML += myNewTag;
}


	</script>
</head>
<body>
	<div style="text-align:center">

		<h2>Doubles Simulation</h2>
		<p>
			<img id="dieImage" alt="die image" src="../images/die1.gif">

		</p>
		<input type="button" value="Click to Play" onclick="SelectImages();">
	</div>

	<hr>
	<a href="http://pages.uoregon.edu/alans/111/CIS%20111/p3/slots.html">In Class Slots Exercise</a>
	<br>
	<a href="http://pages.uoregon.edu/alans/111/CIS%20111/p3/InClassDiceStats.html">In Class Dice Counter Exercise</a>
	<br>
	<p>
		We reviewed for the Midterm Exam
	</p>

	<footer>
		<p>
			&copy; Copyright  by Alan Sylvestre
			<br>
			<a href="mailto:alans@uoregon.edu">Email Me</a>
			<br>
			<a href="http://cargocollective.com/alansylvestre">View My Website Here</a>
		</p>
	</footer>
</body>
</html>

Dormilich · 02-17-2013, 09:21 AM

you don’t roll for the second die.

and since the image (dieImage) is an <img>, it doesn’t have content you could address with innerHTML.