<head>
<script type="javascript/css">
var die1Image,die2Image,die3Image,die4Image;
function start(){
var button=document.getElementById("rollButton");
button.addEventListener("click",rollDice,false);
die1Image=document.getElementById("die1");
die2Image=document.getElementById("die2");
die3Image=document.getElementById("die3");
die4Image=document.getElementById("die4");
}
function rollDice(){
setImage(die1Image);
setImage(die2Image);
setImage(die3Image);
setImage(die4Image);
}
function setImage(dieImg){
var dieValue=Math.floor(1+Math.random()*6);
dieImg.setAttribute("src","die"+dieValue+".png");
dieImg.setAttribute("alt","die image with "+dieValue+" spot(s)");
}
window.addEventListener("load",start,false);
</script>
</head>
<body>
<form action="#">
<input id="rollButton" type="button" value="Roll Dice">
</form>
<ol>
<li><img id="die1" src="blank.png" alt="die 1 image"></li>
<li><img id="die2" src="blank.png" alt="die 2 image"></li>
<li><img id="die3" src="blank.png" alt="die 3 image"></li>
<li><img id="die4" src="blank.png" alt="die 4 image"></li>
</ol>
</body>
whenever I click the roll button, the blank.png photos stay and die photos don't display in their places. the die images are named (die1.png->die6.png) correctly.
<script type="text/javascript"> and not "javascript/css"