Javascript, how do i get two corresponding elements from an array to generate at the same time with the random feature?

Question

i can´t figure out how to get two items from my array list that belong together to generate at the same time when i use the random feature. When i click on the "get Name and Grade" button i want to get a random name in one box and its corresponding Grade in the other. i can only manage to get random names and grades that does not belong together. How do i fix this?

<!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 Name and Grade" onclick="document.getElementById('box').value = getName(),document.getElementById('box2').value = getGrade()"/> 
    </form>    






</body>
</html>

Answer 1

There are really many syntax errors and weird calls in your example, which shall be ignored for now.

You could store the data in objects instead, so the data is always stored together:

var tName = [
    {Name: "Klara", Grade: "A"},
    {Name: "Sarah", Grade: "A"}
];

You can then access the values like this:

tName[0].Name;
tName[0].Grade;

Edit:

<html> 
    <head> 
        <script>
            var  mName = [
                     {Name: "Klara", Grade: "A"},
                     {Name: "Sarah", Grade: "A"},
                     {Name: "Andrea", Grade: "B"},
                     {Name: "Emil", Grade: "C"},
                     {Name: "Victor", Grade: "C"},
                     {Name: "Alicia", Grade: "D"},
                     {Name: "Thomas", Grade: "E"},
                     {Name: "Robert", Grade: "E"}
            ];

            function getName(){
                return mName[Math.floor(Math.random() * mName.length)]
            }

            function setValues(){
                var tB1 = document.querySelector('#box');
                var tB2 = document.querySelector('#box2');
                var tName = getName();

                tB1 && (tB1.value = tName.Name);
                tB2 && (tB2.value = tName.Grade)
            }
        </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 Name and Grade" onclick="setValues()"/> 
        </form>
    </body>
</html>

Answer 2

Okay so now my code looks like this. When i press the button to get grade and name i get [object Object] in each textbox, can´t figure out how to solve it.

<!DOCTYPE html>
<html> 

<head> 
<meta charset="UTF-8">
<title>javascript</title>

<script type="text/javascript">


    var  tName = [
         {Name: "Klara", Grade: "A"},
         {Name: "Sarah", Grade: "A"},
         {Name: "Andrea", Grade: "B"},
         {Name: "Emil", Grade: "C"},
         {Name: "Victor", Grade: "C"},
         {Name: "Alicia", Grade: "D"},
         {Name: "Thomas", Grade: "E"},
         {Name: "Robert", Grade: "E"}
    ];

    tName[0].Name;
    tName[0].Grade;
    tName[1].Name;
    tName[1].Grade;
    tName[2].Name;
    tName[2].Grade;
    tName[3].Name;
    tName[3].Grade;
    tName[4].Name;
    tName[4].Grade;
    tName[5].Name;
    tName[5].Grade;
    tName[6].Name;
    tName[6].Grade;
    tName[7].Name;
    tName[7].Grade;


    function getName()
    {
        var rand = tName[Math.floor(Math.random() * tName.length)];
        return rand;
        var box =document.getElementById('getName');getName.value=getName;

        }

   function box(){
   var box =document.getElementById('getName');getName.value=getName;
   }



   function box2(){
   var box2 =document.getElementById('getName');getName.value=getName;
   }






</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 Name and Grade" onclick="document.getElementById('box').value = getName(),document.getElementById('box2').value = getName()"/> 
    </form>    






</body>
</html>

Javascript, how do i get two corresponding elements from an array to generate at the same time with the random feature?

Question

2 answers

solution1
0 ACCPTED 2016-11-27 20:23:14

solution2
0 2016-11-27 21:29:10

Javascript, how do i get two corresponding elements from an array to generate at the same time with the random feature?

Question

2 answers

solution1 0 ACCPTED 2016-11-27 20:23:14

solution2 0 2016-11-27 21:29:10

solution1
0 ACCPTED 2016-11-27 20:23:14

solution2
0 2016-11-27 21:29:10