I'm doing an assignment for class and I'm unable to figure this all out.

Here is the assignment:

Give the first div in the body an id of "diceHere". Create a function that populates "diceHere" after rolling, instead of hard-coding it into the body.

Add a text box that allows the user to request between 1 and 6 dice, then add a parameter to the function which passes that number through.

Make sure that your dice function also has a parameter for passing the paragraph id.

Create a variable that allows you to store a string that will write the proper number of die images to your page.

Here is what I have so far:

<!DOCTYPE html>
<html>
<head>
<title> Die Rolls </title>
<script type="text/javascript">
function diceRoll()
{
roll = Math.floor(Math.random()*(6) + 1);
imgName = 'die' + roll + '.gif';
document.getElementById('dieImg').src = imgName;
}
</script>

</head>

<body>
<br/><br/>
<div style="text-align:center" id=diceHere>

<img id="dieImg" alt="die image"
src="die1.gif">

</p>
<input type="button" value="Click to Roll" onClick="diceRoll();">
</div>
</body>
</html>


Can anyone help me with this?