Fatal编程技术网
  • javascript/
  • Javascript document.getElementById不使用Web包

Javascript document.getElementById不使用Web包

javascript webpack

Javascript document.getElementById不使用Web包,javascript,webpack,Javascript,Webpack,我一直在尝试用Webpack实现基本Javascript，但在尝试使用基本方法时发现了很多问题。我知道在DOM之前加载js可能有问题，但我对这个问题的所有修复都是徒劳的 例如，我试图运行let taskinput=document.getElementById（'new-task'）

我一直在尝试用Webpack实现基本Javascript，但在尝试使用基本方法时发现了很多问题。我知道在DOM之前加载js可能有问题，但我对这个问题的所有修复都是徒劳的

例如，我试图运行
let taskinput=document.getElementById（'new-task'）taskinput变量时，我得到一个返回值
未捕获引用错误：taskinput未定义（…）

我尝试了很多不同的解决方案，以使这段代码在DOM加载后运行，但似乎没有任何效果

我尝试了将javascript文件放在DOM底部的基本尝试

我尝试了一种基本的js方法，如下所示：


  document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    initApplication();
  }

function initApplication() {(... placed code in here ...)}


我尝试过使用jQuery


$( document ).ready(function() { });


我已经尝试使用HTML网页包插件将javascript文件注入HTML

我的网页包有什么遗漏吗

index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample Site</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <button id="new-task">click</button>
    <script src="/assets/app.bundle.js"></script>
  </body>
</html>



使用浏览器控制台，您只能访问全局声明的变量，如果在函数中定义JavaScript变量，它不会成为全局变量。另外，使用
声明的变量永远不要成为全局变量

如果要全局声明变量，可以将其设置为
窗口的属性，例如：


window.taskinput = document.getElementById('new-task');


这可能有助于调试，但避免在生产代码中进行调试，因为使用全局变量被认为是一种不好的做法

例如，我试图运行let taskinput=document.getElementById（'new-task'）；当我在控制台中搜索taskinput变量时，我得到了uncaughtreferenceerror的返回：taskinput未定义（…）

首先，webpack捆绑包中的模块代码在其自己的作用域中运行，有效地在闭包中运行，而不是在全局作用域中运行（您可以通过
窗口
访问全局作用域）。其次，即使您转到控制台并使用
let
声明变量，例如
let a=1
，即使您的控制台在全局（
窗口
）范围内运行，如果您尝试执行
window.a
操作，您将得到
未定义的
，因为
让
变量不附加到
窗口
范围。看

我的网页包有什么遗漏吗

可能是因为您的bundle中由webpack生成的代码不在全局范围内运行，如上所述


如果要将变量公开到全局范围，以便能够在控制台中出于调试目的使用它，请将其声明为
window.variableName
。或者，您可以在代码中添加断点，方法是在要签出的变量之后添加
调试器
，而不将其暴露于全局范围。
谢谢！我现在要尝试一下，但在使用onclick命令启动时也遇到了问题。虽然我想这可能是源于同一个问题。好吧，那么我应该如何与DOM有效沟通呢？在使用webpack时，是否必须使用HTML模板语言或使用javascript生成所有页面HTML？“好的，那么我应该如何与DOM进行有效通信？”通常，您希望将供应商代码，例如
jQuery
，放在页面的头部，因为它很可能不依赖于DOM状态，还有您自己的代码，它可能与body标记底部的DOM交互。也许我不明白你到底在问什么，在这种情况下，你能提供一个例子吗？我的意思是说，老实说，我只是想用javascript在点击时创建一个简单的警报框。我正在努力学习更多关于javascript语言的知识，而不必像其他库那样喋喋不休。但是，让我给出一些示例代码来向您展示我正在尝试做什么。除此之外，您的实际问题是，当您执行
taskInput.onclick=alert（'hey'）您将立即调用分配右侧的
警报
功能。因此，
alert
执行一次，它在赋值中返回
undefined
，就这样。最后得到的结果是
taskInput.onclick===undefined
。改为这样分配：
taskInput.onclick=function（）{alert（'hey'）；}
。这样，您就可以在
onclick
属性上为函数指定一个引用，而不是立即执行它。如果这是您的问题，您可以检查变量。您不必将它们暴露在
窗口中
，就可以检查它们。正如我告诉您的，您可以向代码中添加断点，方法是在要检查的代码部分后添加语句，或者在浏览器控制台中添加断点。有关如何执行此操作的说明，请参阅

window.taskinput = document.getElementById('new-task');