Javascript 三次点击后禁用点击事件，然后显示；“完成”；在上次单击后的按钮上
下面是我为onclick事件编写的代码 我想做的是，在显示最后一个学生信息后，我想禁用按钮并显示done而不是next 我这里有我的JS代码，下面有我的HTML代码。我已经尝试了Javascript 三次点击后禁用点击事件，然后显示；“完成”；在上次单击后的按钮上,javascript,html,if-statement,onclick,disable-link,Javascript,Html,If Statement,Onclick,Disable Link,下面是我为onclick事件编写的代码 我想做的是，在显示最后一个学生信息后，我想禁用按钮并显示done而不是next 我这里有我的JS代码，下面有我的HTML代码。我已经尝试了.one方法，但没有成功 我的JS代码： var studentInfo=[ { name: 'Sabrina Hill', address:{street:'172 Brushcreek Dr',city:'Sanford',state:'FL'}, gpa:[3
.onevar 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);
<!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>
学生信息
在下面显示学生信息：
点击查看下一个学生