个人中心
gpt4 book ai didi

javascript - 我需要让我的 onclick 事件显示多个内容

转载 作者：行者123 更新时间：2023-11-28 08:34:48 25 4
gpt4 key购买 nike

我想知道如何让我的 onclick 事件显示多个这个。我希望一旦我单击按钮，每次单击它时它都会显示新的学生信息。我只会显示 3 个学生信息。下面是我的 javascript 代码和它链接到的 html。任何帮助都会很棒。现在我的 onclick 事件只显示一个学生信息。

(function(){
    console.log('******Objects of Student Information Below!******');
//Student Information in An Object

    var studentInfo=[{name1: 'Sabrina Hill', address1:{address1:'172 Brushcreek Dr', city1:'Sanford',state1:'FL'},gpa1:[3.2,3.7,4.0]},{name2: 'JoelOsteen', address2:{address2:'3226 Lilac Dr', city2:'Portsmouth',state2:'VA'},gpa2:[3.0,2.7,2.0]}];

    console.log('Name:',studentInfo[0].name1);
    console.log('Address:',studentInfo[0].address1.address1,studentInfo[0].address1.city1,studentInfo[0].address1.state1);
    console.log('GPA:',studentInfo[0].gpa1[0]+',',studentInfo[0].gpa1[1]+',',studentInfo[0].gpa1[2]);

    console.log('Name:',studentInfo[1].name2);
    console.log('Address:',studentInfo[1].address2.address2,studentInfo[1].address2.city2,studentInfo[1].address2.state2);
    console.log('GPA:',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]);

    function displayInfo(){
    document.getElementById('name').innerHTML='Name: '+ (studentInfo[0].name1);
    document.getElementById('address').innerHTML='Address: '+(studentInfo[0].address1.address1+ ' '+studentInfo[0].address1.city1+' '+studentInfo[0].address1.state1);
    document.getElementById('gpa').innerHTML='GPA: '+studentInfo[0].gpa1[0]+' ,'+studentInfo[0].gpa1[1]+' ,'+studentInfo[0].gpa1[2];
    }



    document.getElementById('info_btn').onclick = function(){
        displayInfo()

    };


    console.log('******Added Information******');


    console.log('Name:',studentInfo[0].name1);
    console.log('Address:',studentInfo[0].address1.address1,studentInfo[0].address1.city1,studentInfo[0].address1.state1);
    console.log('GPA:',studentInfo[0].gpa1[0]+',',studentInfo[0].gpa1[1]+',',studentInfo[0].gpa1[2]);

    console.log('Name:',studentInfo[1].name2);
    console.log('Address:',studentInfo[1].address2.address2,studentInfo[1].address2.city2,studentInfo[1].address2.state2);
    console.log('GPA:',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]);

    function modifyStudent(studentObj,name,address,city,state,gpa){
        studentObj.name=name;
        studentObj.address = {
            address:address,
            city:city,
            state:state
        };
        studentObj.gpa = gpa;
    }
    var newStudentInfo = [{
        name:"Test",
        address:{
            address:"No where",
            city:"Chicago",
            state:"IL",
        },
        gpa:[]
    }];
    modifyStudent(newStudentInfo[0],'Super Man', '123 Test Dr', 'Orlando', 'Florida', [3.2, 4.0, 2.2]);
    console.log('Name:',newStudentInfo[0].name);
    console.log('Address:',newStudentInfo[0].address.address,newStudentInfo[0].address.city,newStudentInfo[0].address.state);
    console.log('GPA:',newStudentInfo[0].gpa);





})();

这是它链接到的 HTML:

<!doctype html>  

<html lang="en">
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Students info</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

<div id="form_box">
    <div id="contact-form">
        <p class="heading">Display Students Information Below:</p>
        <div id="form-box">                     

                <div id="output">
                    <div id="name">
                        <p></p>
                    </div>
                    <div id="address">
                        <p></p>
                    </div>
                    <div id="gpa">
                        <p></p>
                    </div>
                    <div id="date">
                        <p></p>
                    </div>
                    <div id="gpaavg">
                        <p></p>
                    </div>
                    <div id="phone">
                        <p></p>
                    </div>
                    <!-- <div class="clear"></div> -->
                </div>

                <div id="info_box">
                    <div id="info_btn">
                        <h4 id="round" class="heading">Click To See Next Student</h4>
                        <a href="#" class="buttonred">Next</a>
                    </div>
                </div>
        </div>        
        <div class="clear"></div>
    </div>
</div>

<script type="text/javascript" src="js/main.js"></script>

</body>
</html>

最佳答案

LIVE DEMO 

(function(){

  var c = 0; // "current" Array index pointer

  var studentInfo=[
      {
        name: 'Sabrina Hill',
        address:{street:'172 Brushcreek Dr',city:'Sanford',state:'FL'},
        gpa:[3.2,3.7,4.0]
      },{
        name: 'JoelOsteen',
        address:{street:'3226 Lilac Dr', city:'Portsmouth',state:'VA'},
        gpa:[3.0,2.7,2.0]
      }
  ];


  function el(id){ return document.querySelector(id); } 

  function displayInfo(){
    var st = studentInfo[c];
    el('#name').innerHTML = 'Name: '+ (st.name);
    el('#address').innerHTML = 'Address: '+(st.address.street+' '+st.address.city+' '+st.address.state);
    el('#gpa').innerHTML='GPA: '+st.gpa[0]+' ,'+st.gpa[1]+' ,'+st.gpa[2];
  }

  el('#info_btn').addEventListener('click', function(){
    displayInfo();
    c = ++c % studentInfo.length; // Increase Array pointer and loop
  }, false); 


})();

说明

重要说明:看看我对您的 studentInfo 所做的更改属性名称。我删除了每个末尾不必要的数字。

设置变量c (当前数组索引指针)每次单击按钮后，从您的当前对象中获取值并增加当前值。另外，使用提醒运算符 (%) 确保将指针值循环回 0如果超过。

有趣的部分是变量var st = studentInfo[c];里面function displayInfo()从学生对象中取出所需的学生数组索引。

关于javascript - 我需要让我的 onclick 事件显示多个内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21370324/

25 4 0
文章推荐： css - mixin 中的多个过渡属性
文章推荐： css - 如何让表单与导航按钮位于同一行？
文章推荐： css - 获取内联 CSS 背景图像
文章推荐： c++ - 我在使用算法的库排序功能时遇到问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com