javascript - 当我单击随机时，它显示 [object object] 而不是数组数据

Question

代码存储表单中的数据并将其显示在列表中，当我单击随机时，它应该显示数组中的随机值，但事实并非如此，它显示 [object object] 并且随机值不应重复

 <form >
        First Name<input id = "name1" required/> 
        Last Name <input id ="name2"  required/> 
        City <input id ="city"  required/>
        </form>

          <button onclick="getResult()" >SUBMIT</button>
          <button onclick="getData()">Random</button>
        <br><br>
    <p id="store"></p>
        <br>
        Random Data:<output id="info"/>
        <h3>Student Data </h3>
        <output id="out"/>



        <script>

        var arr=[];
        function getResult(){
        var name1 = document.getElementById('name1').value;
        var name2 =document.getElementById('name2').value;
        var city = document.getElementById('city').value;
        var students={
        firstName:name1,lastName:name2,cityName:city
        }
        arr.push(students);
        var k='';
        for(var g=0;g<arr.length;g++)
        k=k+" <li>"+eval(g+1)+'.'+arr[g].firstName+" "+arr[g].lastName+" "+arr[g].cityName+"       </li>";
    document.getElementById('out').innerHTML = k;
        document.getElementById('name1').value="";
        document.getElementById('name2').value="";
    document.getElementById('city').value="";
     document.getElementById('store').innerHTML='Number of students = ' +arr.length +'';
    }



    function getData(){
    var rand = arr[Math.floor(Math.random() * arr.length)];  
    var el=document.getElementById('info')
    el.innerHTML=rand;

    }



        </script>

Answer 1

您正在获取对象，因为您已将对象插入数组，并且您正在从数组返回对象 。因此，您需要从 object 获取属性并将其显示在 div 中。

function getData(){
    var rand = arr[Math.floor(Math.random() * arr.length)];  
    var el=document.getElementById('info')
    el.innerHTML=rand.firstName;
}