以下是我创建的jsp页面：
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Start</title>
<link href="resources/css/StartPage.css" rel=stylesheet type="text/css"/>
</head>
<body>
<div id="content">
<div class="options">
<label class="label">Name of Excel File
<select name="filename" id="selectfile" class="active">
<option selected disabled>---select---</option>
<c:forEach var="file" items="${exportedfiles}">
<option value="${file}"><c:out value="${file}"/></option>
</c:forEach>
<option value="custom">New file</option>
</select>
<input type="text" name="filename" id="fileinput"/>
</label>
</div>
<input type="button" value="Edit" class="button" id="editbutton" onclick="editExcel()"/>
</div>
<script type="text/javascript">
function editExcel(){
var filename;
var pageURL;
var select = document.getElementById("selectfile");
var input = document.getElementById("fileinput");
if(select.value == "custom"){
filename = input.value;
pageURL = "addTestCase";
}
else{
filename = select.options[select.selectedIndex].text;
pageURL = "import";
}
console.log(pageURL);
window.location.href = pageURL+"?filename="+filename;
}
var editExcel = function(event){
var filename;
var pageURL;
var select = document.getElementById("selectfile");
var input = document.getElementById("fileinput");
if(select.value == "custom"){
filename = input.value;
pageURL = "addTestCase";
}
else{
filename = select.options[select.selectedIndex].text;
pageURL = "import";
}
console.log(pageURL);
window.location.href = pageURL+"?filename="+filename;
}
var takeInput = function(event){
var val = event.target.value;
var input = document.getElementById("fileinput");
var button = document.getElementById("editbutton");
if(val == 'custom'){
input.style.display = "block";
event.target.style.display = "none";
input.className = "active";
event.target.className = "";
button.value = "Create";
}
else{
input.style.display = "none";
event.target.style.display = "block";
input.className = "";
event.target.className = "active";
button.value = "Edit";
}
}
document.getElementById("selectfile").onchange = takeInput;
document.getElementById("selectfile").addEventListener('change',takeInput,true);
document.getElementById("editbutton").onclick = editExcel;
document.getElementById("editbutton").addEventListener('click',editExcel,true);
</script>
</body>
</html>
单击＆＃34;编辑按钮＆＃34;，浏览器应导航到editExcel（）中生成的URL。但是，永远不会调用该函数。
除了向＆＃34; editbutton＆＃34;添加事件监听器之外在javascript中定义＆＃39; onclick＆＃39;标签中的属性，我已经尝试将脚本块移动到头块内，并尝试将onclick更改为onClick。这些技巧似乎都不起作用。
类似的javascript代码适用于我的应用程序中的其他导航按钮。所以我相信＆＃39; onclick＆＃39;永远不会生成事件。
我有什么遗失的吗？
答案 0 :(得分：0)
<html>
<head>
<title>Start</title>
<link href="resources/css/StartPage.css" rel=stylesheet type="text/css"/>
</head>
<body>
<div id="content">
<div class="options">
<label class="label">Name of Excel File
<select name="filename" id="selectfile" class="active">
<option selected disabled>---select---</option>
<c:forEach var="file" items="${exportedfiles}">
<option value="${file}"><c:out value="${file}"/></option>
</c:forEach>
<option value="custom">New file</option>
</select>
<input type="text" name="filename" id="fileinput"/>
</label>
</div>
<input type="button" value="Edit" class="button" id="editbutton" onclick="editExcel()"/>
</div>
<script type="text/javascript">
function editExcel(){
alert("asdd");
var filename;
var pageURL;
var select = document.getElementById("selectfile");
var input = document.getElementById("fileinput");
if(select.value == "custom"){
filename = input.value;
pageURL = "addTestCase";
}
else{
filename = select.options[select.selectedIndex].text;
pageURL = "import";
}
console.log(pageURL);
window.location.href = pageURL+"?filename="+filename;
var editExcel = function(event){
var filename;
var pageURL;
var select = document.getElementById("selectfile");
var input = document.getElementById("fileinput");
if(select.value == "custom"){
filename = input.value;
pageURL = "addTestCase";
}
else{
filename = select.options[select.selectedIndex].text;
pageURL = "import";
}
console.log(pageURL);
window.location.href = pageURL+"?filename="+filename;
}
var takeInput = function(event){
var val = event.target.value;
var input = document.getElementById("fileinput");
var button = document.getElementById("editbutton");
if(val == 'custom'){
input.style.display = "block";
event.target.style.display = "none";
input.className = "active";
event.target.className = "";
button.value = "Create";
}
else{
input.style.display = "none";
event.target.style.display = "block";
input.className = "";
event.target.className = "active";
button.value = "Edit";
}
}
}
document.getElementById("selectfile").onchange = takeInput;
document.getElementById("selectfile").addEventListener('change',takeInput,true);
document.getElementById("editbutton").onclick = editExcel;
document.getElementById("editbutton").addEventListener('click',editExcel,true);
</script>
</body>
</html>
试试这个： - 但是，为了有效地工作，你仍然坚持使用多个事件处理程序时使用AJAX
答案 1 :(得分：0)
原始代码现在正在工作。我在#editbutton的样式表中更改了一些值并且它有效！我仍然没有弄清楚问题是什么，因为当我恢复到原始值时按钮仍在工作。这是CSS文件：
#content{
background:#2A88AD;
width:100%;
height:100%;
}
#content label{
display: block;
position:fixed;
left:40%;
top:30%;
width:20%;
height:5%;
font: bold 16px Arial, Helvetica, sans-serif;
color: #fff;
}
select{
width:100%;
height:100%;
padding: 8px;
border-radius: 6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border: 2px solid #fff;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
font:500 17px Arial #000;
}
#selectfile *{
background-color:transparent;
font:500 17px Arial #fff;
display:block;
padding:8px;
}
#fileinput {
display:none;
width:100%;
height:100%;
padding: 8px;
border-radius: 6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border: 2px solid #fff;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}
#editbutton{
position:fixed;
left:40%;
top:55%;
width:20%;
height:5%;
background: #fff;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
color: #2A88AD;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
font-weight: bold;
}
#editbutton:hover{
color:#00B8E6;
}
.options{
z-index: 2;
position:fixed;
left:40%;
top:35%;
width:20%;
height:20%;
}
.options .active{
display:block;
z-index: 1;
}