I am trying to make a dice where you can choose the minimum and maximum values. Currently, I have tried different ideas, but they don’t work. It messes up the other code, and I don’t know why.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<script src="styles.js"></script>
<title>Dice Roller</title>
</head>
<body>
<h1>Dice Roller</h1>
<p>Can't decide on what to eat? Or what to do? Our dice roller is perfect for this.</p>
<div>
<label>Minimum:</label><input type="number" min="1" class="input min" id="min"><p> </p><label>Maximum:</label><input type="number" min="2" class="input max" id="max">
</div><br>
<div>
<section>
<button class="roll-button" type="button" onclick="rollDice(document.getElementById(`min`).value, document.getElementById(`max`).value)">Roll</button>
<h1 id="output"></h1>
</section>
<section>
<script type="text/javascript">
function rollDice(a = 1, b = 6) {
dice = Math.floor(Math.random() * (b - a + 1)) + a
console.log(dice);
document.getElementById("output").innerHTML = dice;
}
</script>
</section>
</div>
</body>
</html>
How can I get the input from the min and max values and use it in the JavaScript function in a way that it works? (starter coder, sorry if it is an easy question)