How can I ensure that when using the random feature, two items from my array list that belong together are generated at the same time? Specifically, when clicking on the "get Name and Grade" button, I want to display a random name in one box and its corresponding grade in another. Currently, I am only able to get random names and grades that do not match up. How can I correct this issue?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript</title>
<script type="text/javascript">
var names = [];
var grades = [];
names[0]="Klara";
grades[0]="A";
names[1]="Sarah";
grades[1]="A";
names[2]="Andrea";
grades[2]="B";
names[3]="Emil";
grades[3]="C";
names[4]="Victor";
grades[4]="C";
names[5]="Alicia";
grades[5]="D";
names[6]="Thomas";
grades[6]="E";
names[7]="Robert";
grades[7]="E";
function getName()
{
var rand = names[Math.floor(Math.random() * 8)];
return rand;
var box =document.getElementById('getName');getName.value=getName;
}
function box(){
var box =document.getElementById('getName');getName.value=getName;
}
function getGrade()
{
var rand = grades[Math.floor(Math.random() * 8)];
return rand;
var box =document.getElementById('getGrade');getGrade.value=getGrade;
}
function box2(){
var box2 =document.getElementById('getGrade');getGrade.value=getGrade;
}
</script>
</head>
<body>
<form>
<input type="text" name="box" id="box" value=""/> <br/>
<input type="text" name="box2" id="box2" value=""/> <br/>
<input type="button" name="textbox1" id="textbox1" value="Get Random Name and Grade" onclick="document.getElementById('box').value = getName(),document.getElementById('box2').value = getGrade()"/>
</form>
</body>
</html>