【发布时间】：2015-10-27 19:47:45
【问题描述】：
以下是我创建的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>
点击“editbutton”时，浏览器应该导航到在editExcel()中生成的URL。但是，该函数永远不会被调用。
除了在 javascript 中为“editbutton”添加事件侦听器并在标记中定义“onclick”属性外，我还尝试将脚本块移动到 head 块内，并尝试将 onclick 更改为 onClick。这些技巧似乎都不起作用。
类似的 javascript 代码适用于我的应用程序中的其他导航按钮。所以我相信永远不会生成“onclick”事件。
我有什么遗漏吗？
【问题讨论】：
-
检查您的浏览器控制台，看看是否有任何错误
-
通过在函数内部添加警告消息来调用该函数。
-
为什么要在脚本代码中写两次函数定义？
-
我尝试了不同的调用函数的方式。我也尝试添加一条警报消息，但没有出现。
-
尝试在 javascript 的末尾关闭“function editExcel(){”，以便所有变量都在一个函数中
标签： javascript html onclick