I'm a total beginner with JavaScript.
When I run this code, I get this error in Chrome's console:
Uncaught ReferenceError: aresults is not defined
aresults is an array. I thought I had it initialised before the For loop that creates integers the array will store will run. But Chrome seems to say there is no array.
The finished code aims to create a user-defined amount of integers between one and 10, and store them in an array, and then count the number of integers in the array that fall between the user-defined target and 10.
What I have done wrong here? And how can I fix it?
Thanks.
<!DOCTYPE html>
<head>
</head>
<body>
<h2>Storyteller dice roller</h2>
<!--User selects number of 10-sided dice to be rolled, and target number -->
Number of dice: <input type="number" value="5" id="dice"><br>
Difficulty: <input type="number" value="6" id="diff"><br>
<!--Button executes the "roll" JavaScript function-->
<button onclick="roll()">Roll</button>
<script>
function roll() {
// initialize array to store results of "dice rolls"
var aresults = [];
// store user input of "Number of dice" as vdice variable
var vdice = document.getElementById("dice").value;
// store user input of "Difficulty" as vdiff variable
var vdiff = document.getElementById("diff").value;
// simulates rolling a number of 10-sided dice
// for loop:
// set vrolled to 0;
// run loop if vrolled is less than dice;
// increase vrolled by 1 each time loop is run
// continue for as many times as there are "dice"
for (vrolled = 0; vrolled <= vdice; vrolled++) {
// Create a random number between 1 and 10
var vresult=Math.floor(Math.random() * 10) + 1;
// append the new dice roll result to the array
aresults.push(vresult);
}
}
// Display variable results in console
console.log("Results array");
console.log(aresults);
console.log("Dice to be rolled");
console.log(vdice);
console.log("Roll result");
console.log(vresult);
console.log("Difficulty");
console.log(vdiff);
console.log("Dice rolled");
console.log(vrolled);
</script>
</body>
You are creating all the variables inside the function and trying to access them outside. Defining using var means the variable will be available everywhere in scope. It doesn't always means that it will be available everywhere i.e global Defining all the variables outside the scope will solve the problem as all variables will become global.
<!DOCTYPE html>
<head>
</head>
<body>
<h2>Storyteller dice roller</h2>
<!--User selects number of 10-sided dice to be rolled, and target number -->
Number of dice: <input type="number" value="5" id="dice"><br>
Difficulty: <input type="number" value="6" id="diff"><br>
<!--Button executes the "roll" JavaScript function-->
<button onclick="roll()">Roll</button>
<script>
var aresults = [];
var vdice = document.getElementById("dice").value;
var vresult;
// store user input of "Difficulty" as vdiff variable
var vdiff = document.getElementById("diff").value;
function roll() {
// initialize array to store results of "dice rolls"
// store user input of "Number of dice" as vdice variable
// simulates rolling a number of 10-sided dice
// for loop:
// set vrolled to 0;
// run loop if vrolled is less than dice;
// increase vrolled by 1 each time loop is run
// continue for as many times as there are "dice"
for (vrolled = 0; vrolled <= vdice; vrolled++) {
// Create a random number between 1 and 10
vresult=Math.floor(Math.random() * 10) + 1;
// append the new dice roll result to the array
aresults.push(vresult);
}
}
// Display variable results in console
console.log("Results array");
console.log(aresults);
console.log("Dice to be rolled");
console.log(vdice);
console.log("Roll result");
console.log(vresult);
console.log("Difficulty");
console.log(vdiff);
console.log("Dice rolled");
console.log(vrolled);
</script>
</body>