只有第一个按钮可以显示答案,第二个就显示不了了,怎么办啊
去掉 display=“none”后这样显示
<%@ page contentType="text/html; charset=gb2312" language="java" %>
<%@ page import= "com.mingrisoft.action.Examination" %>
<%@ page import= "com.mingrisoft.dao.ExaminationDAO" %>
<%@ page import= "java.util.ArrayList" %>
<%@ taglib prefix= "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>试题库管理系统</title>
<link href="CSS/style1.css" >
<%
ArrayList<Examination> users = new ExaminationDAO().getAllExaminationInfos();
if (users == null) {
users = new ArrayList<>();
}
%>
</head>
<body>
<div class="bgStyle">
<div class="header">
<div class="logo">
<img src="Images/logo.png">
</div>
<!--注释:清除div的浮动-->
<div class="clear"></div>
</div>
</div>
<!-- <table border="1" style="text-align: center; border-collapse: collapse">-->
<table width="1102" height="266" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
</tr>
<%
for (Examination sa : users) {
%>
<tr>
<td ><%=sa.getSubject() %>(<%=sa.getType() %>)
<input type="button" value="显示答案" id="test">
<div id="testDiv" style="width:100px; height:100px; border:1px solid red; display:none;"> <%=sa.getAnswer() %> </div>
</td>
<tr >
<td> A.<%=sa.getOptionA() %> </td>
</tr>
<tr>
<td> B.<%=sa.getOptionB() %> </td>
</tr>
<tr>
<td> C.<%=sa.getOptionC() %> </td>
</tr>
<tr>
<td> D.<%=sa.getOptionD() %> </td>
</tr>
<tr>
<td> </td>
</tr>
</tr>
<% }
%>
</table>
</body>
<script type="text/javascript">
document.getElementById("test").onclick=function(){
document.getElementById("testDiv").style.display="inline";
}
</script>
</html>
id始终选择第一个。建议加上传入值来区分。
循环渲染之后,页面会出现多个相同的id,导致浏览器无法加载,可以在id后面拼接上下标。