在外部 js 文件中找不到变量：function 名称
[英]can't find variable: function name in external js file
问题描述
i have a problem with my website.
我的网站有问题。 I have couple of functions in java script that works in <body> <script> js code </script></body> but when i link external js file with exactly the same code functions that are called by onclick"function name" attribute stop working and I get error can't find variable: function name also it seems like it can't find some of ids for variables because i can't log them.我在 java 脚本中有几个函数可以在<body> <script> js code </script></body>中工作，但是当我将外部 js 文件链接到与onclick"function name"属性调用的代码函数完全相同的代码函数时停止工作，我得到错误找不到变量：function 名称也似乎找不到变量的一些 ID，因为我无法记录它们。 this is my code这是我的代码
function onload() { /* leaderboard variable */ let x = document.getElementById('boardw'); /* help popup variable*/ let y = document.getElementById('helpw'); /* settings popup variable*/ let z = document.getElementById('setw'); /* help button variable*/ let a = document.getElementById('help'); /* dropdown container variable*/ let dropdown = document.getElementById('dropdown'); /* footer popup display none*/ document.getElementById('card').style = "display: none;"; /* variable test */ console.log(x); /* show footer popup */ function showCard() { document.getElementById('card').style = "display: block;"; document.getElementById('footer').style = "display: none;"; } /* hide footer popup */ function hide() { document.getElementById('card').style = "display: none;"; document.getElementById('footer').style = "display: block;"; } /* choose time in dropdown function */ function show(anything) { document.getElementById('txt').value = anything; } /* show options in dropdown */ dropdown.onclick = function() { dropdown.classList.toggle('active'); } /* show leaderboard function*/ function menu1() { x.classList.toggle('active'); } /* show help popup function*/ function menu2() { y.classList.toggle('active'); a.classList.toggle('active'); } /* show settings function*/ function menu3() { z.classList.toggle('active'); } /* hide popups function*/ function remove() { y.classList.remove('active'); z.classList.remove('active'); x.classList.remove('active'); dropdown.classList.remove('active'); } }
<body id="bd" style="" onload="onload()"> <script src="script.js" charset="utf-8"></script> <;-- dropdown select time window --> <div class="dropdown" id="dropdown" onclick=""> <?-- dropdown textbox with chosen informations --> <input type="text" class="textbox" id="txt" value="" placeholder=" select the test duration" readonly> <!-- options for dropdown select --> <div class="option"> <div onclick="show(' 1 minute')">1 minute</div> <div onclick="show(' 2 minutes')">2 minutes</div> <div onclick="show(' 3 minutes')">3 minutes</div> <div onclick="show(' 5 minutes')">5 minutes</div> <div onclick="show(' 10 minutes')">10 minutes</div> </div> </div> <!-- checkboxes for charset in game --> <div id="charset"> <!-- normal letters check --> <div> <label for="cka">a</label> <input type="checkbox" id="cka" class="ck"> </div> <!-- capital letters check --> <div> <label for="ckB">A</label> <input type="checkbox" id="ckB" class="ck"> </div> <!-- numbers check --> <div> <label for="ck1">1</label> <input type="checkbox" id="ck1" class="ck"> </div> <!-- special characters check --> <div> <label for="ck>">#</label> <input type="checkbox" id="ck" class="ck"> </div> </div> <!-- about popup --> <footer onclick="remove()"> <!-- show popup btn --> <button id="footer" onclick="showCard();" style="">i</button> <!-- popup container --> <div id="card" class="card" style=""> <!-- close popup btn --> <button id="close" onclick="hide()">x</button> </div> </footer> <!-- menu --> <menu> <!-- leaderboard popup --> <button class="menu" id="board" onclick="menu1()">L</button> <div id="boardw" style="" class="menuw"> </div> <!-- help popup --> <button class="menu" id="help" onclick="menu2()">?</button> <div id="helpw" style="" class="menuw"> </div> <!-- settings pop --> <button class="menu" id="settings" onclick="menu3()">S</button> <div id="setw" style="" class="menuw"> </div> </menu> <!-- start game btn --> <div id="gma"> <a href="#"><button id="start">Start</button></a> </div> <!-- frame for higher resolution screen--> <div class="h"> </div> </body>
2 个解决方案
解决方案1
1 已采纳 2022-07-30 14:44:52
You wrapped your functions in function onload() {... } so the inner functions can't be reached from HTML.您将函数包装在function onload() {... }中，因此无法从 HTML 访问内部函数。
- Remove this wrapper.删除此包装。
- Add
deferattribute to the script在脚本中添加defer属性
解决方案2
0 2022-07-30 15:31:57
put functions and variables outside the onload function, or use addEventListener to call listener document.getElementById("cka").addEventListener("click", function(){... })将函数和变量放在onload function之外，或者使用addEventListener调用监听器document.getElementById("cka").addEventListener("click", function(){... })
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.