如何阻止JavaScript生成只包含JS函数调用的HTML文件
如何阻止JavaScript生成只包含JS函数调用的HTML文件
提问于 2019-04-04 09:01:13
但是，当在javascript文件中使用EventListener调用函数document.getElementById("messageSubmit").addEventListener("click", getKey)时，当运行我的代码时，JS抛出一个ReferenceError，指出getKey()没有定义(它是定义的)，并且为了显示错误发生的位置，JS将我指向index.html，它现在只包含一行：getKey()。当查看Inspect元素中的文件时，我的原始index.html就在那里，并且完好无损。到底发生了什么，我该如何去修复它？
我已经尝试在EventListener中将getKey更改为getKey()，并尝试删除新文件，但是我的集成开发环境无法识别新文件是否存在或曾经存在过。(我的集成开发环境是JetBrains的WebStorm )我不会发布整个JS文件，因为它大约有50000行，但这里是有问题的函数和调用。
async function startChat(user, userkey, userPubKey, oUID, position) { //Will start an encrypted chat between two users FIXME: Needs rewriting
targetUID = oUID;
var localUID = user.uid;
console.log(position);
var order = position === "true" ? localUID + " " + targetUID : targetUID + " " + localUID;
console.log(order);
var accepted;
await database.ref("/chats/" + order + "/accepted/" + targetUID + "/").once('value', function(snapshot) {
if(snapshot.val() != null) {
accepted = snapshot.val();
}
});
if (accepted === "true") {
database.ref("/chats/" + order + "/" + localuuid + "/messages/").on("child_added", (data, prevChildKey) => {
var newpost = data.val();
console.log(newpost);
Object.keys(newpost).sort();
console.log(newpost);
const ordered = Object.keys(newpost).sort();
// Object.keys(newpost).map((key, index) => {
//
//
// }).catch( (error) => {
// console.log(error.message);
// console.log(error.code);
// });
console.log(newpost['message']); //{Prints encrypted message(all messages looped)
console.log(newpost['date']);//Prints date stamp(all messages looped)
console.log(newpost['time']);//Prints time stamp(all messages looped)
console.log(newpost['sender']);//Prints sender uid(all messages looped)
//var decrypt = cryptico.decrypt(newpost['message'], userkey).plaintext;
// noinspection JSJQueryEfficiency
$("#chatField").append("<span>" + newpost['sender'] + "</span>");
// noinspection JSJQueryEfficiency
$("#chatField").append("<span>" + newpost['time'] + "</span>");
// noinspection JSJQueryEfficiency
$("#chatField").append("<span>" + newpost['message'] + "</span>");
}).catch( (error) => {
console.log(error.message);
console.log(error.code);
});
} else {
var myRef = firebase.database().ref("/chats/" + order + "/accepted/" + oUID).set("false");
}
document.getElementById("listHere").addEventListener("click", startChat);错误：
index.html:1 Uncaught ReferenceError: getKey is not defined
at HTMLAnchorElement.onclick (index.html:1)单击链接的index.html文件时，将显示：
getKey();没别的了。
我该如何解决这个问题，或者，如果没有办法，有没有解决办法？编辑:有人要HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset="UTF-8">
<link rel="stylesheet" href="ChatLayoutStyleSheet.css">
<title>ChatLayout</title>
<script src="cryptico/cryptico-js-master/lib/cryptico.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="InfoPage.html">Information</a></li>
<li><a href="chatlayout.html">Chat</a></li>
<li><a href="ChatLayoutGC.html">Groupchat</a></li>
<li><a href="signin.html">Sign In</a></li> <!-- DON'T TOUCH THIS -->
<li><a href="signup.html">Sign Up</a></li> <!-- DON'T TOUCH THIS EITHER -->
</ul>
<h1 style = "color: white;" id= "title">Welcome To Your Private Chat Room!</h1>
<h3 style = "color: white;" id="chatName">Invite your friends to start chatting</h3>
<div class = center2 id="chatField">Display Text Here</div>
<div class= center>
<label for="sendmessage" id="messageLabel">Send Message</label>
<input id="sendmessage" type="text" name="Type" placeholder="Type Here"><br>
<button type="submit" value="Send" id="messageSubmit">Send</button>
</div>
<div id="newchat">
<label for="findEmail" class="findChat">Search Emails</label>
<input id="findEmail" type="email" class="findChat">
<input id="findEmailSubmit" class="findChat" onclick="//parseSearchedEmails()" type="submit">
<button id="listHere" onclick=""></button>
<!-- ENCRYPTION PASSPHRASE INPUT REMOVED. DO NOT ADD THAT BACK. THANK YOU. -->
</div>
</body>
<footer>
<script src="bundledCHATJS.js" type="text/javascript"></script>
</footer>
</html>回答 1
Stack Overflow用户
发布于 2019-04-04 11:33:34
这听起来像是一个范围问题(但它不能通过提供的元素来确认和解决)。下面是一个非常基本的示例，其中包含一个导出到全局作用域( web应用程序noawadays的基础)的原始闭包来演示：
// Simulate a bundle with some exports
(function(global) {
function t1() {
alert('Success : all is done in the closure scope');
}
function t2() {
alert('Fails : callback not available in event setter scope');
}
// Exports to global scope
global.t3 = function() {
alert('Success : callback is exported to event setter scope');
};
// This will be set up within closure scope. It works
document.getElementById('test1').addEventListener('click', t1);
})(window)
// This will be set up within window scope and t3 available. It works
document.getElementById('test3').addEventListener('click', t3);
// This will be called within window scope and t2 not available. It fails.
document.getElementById('test2').addEventListener('click', t2);<button id="test1">test 1 (OK)</button>
<button id="test2">test 2 (KO)</button>
<button id="test3">test 3 (OK)</button>
t2 do exist但在设置事件回调时在当前范围内不可用，因此出现not defined错误。解决这个问题的唯一方法是检查代码结构。
我不习惯Webstorm，而这个有点假的index.html可能只是调试器的产物。您提供的JS代码是无用的，它是错误的HTML元素id (listHere而不是messageSubmit)，并且看不到getKey。
顺便说一下，如果您使用addEventListener('click', myFunc())而不是addEventListener('click', myFunc)，它将在设置侦听器时运行回调，而不是在事件发生时运行回调。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55506382
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号