Question

以下是我为onclick事件提供的代码。

我要做的是在显示最后一个学生信息后，我想要禁用该按钮并显示已完成而不是下一个。

我这里有我的JS代码，下面是我的HTML代码。我已经尝试了.one方法但没有成功。

我的JS代码：

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:'Chicago',state:'IL'},
        gpa:[3.0,2.7,2.0]
    } ,{
        name: 'Superman',
        address:{street:'123 Test Dr', city:'Maple Shade',state:'NJ'},
        gpa:[3.4,2.7,2.7]
    }
];
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[c]+' ,'+st.gpa[1]+' ,'+st.gpa[2];
}

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

我的HTML：

<!doctype html>  

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

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

    <title>Student 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>

三次单击后禁用单击事件，然后在最后一次单击后在按钮上显示“完成”

0 个答案: