document.getElementById不与Webpack一起工作

问题描述：

我一直在试图用Webpack实现基本的Javascript，但发现很多麻烦试图获得基本的方法工作。我知道这可能是我在DOM之前加载js的一个问题，但是我对这个问题的所有修复都是徒劳的。document.getElementById不与Webpack一起工作

举例来说，我想只要运行let taskinput = document.getElementById('new-task');，当我搜索taskinput变量在控制台中我得到的Uncaught ReferenceError: taskinput is not defined(…)回报。

我已经尝试了很多不同的解决方案，以使DOM代码在DOM载入后运行，但似乎没有任何工作。

我试图把我的JavaScript文件放在DOM底部的基本尝试。

我试过基本JS方法，像这样：

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

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

我使用jqueries

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

我试图注入我的JavaScript文件到我的HTML与HTML的尝试webpack-plugin

有没有什么我失踪与Webpack？

的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>

app.js

'use strict'; 

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

function initApplication() { 
    onButtonClick(); 
} 

let onButtonClick = function() { 
    let taskInput = document.getElementById('new-task'); 
    taskInput.onclick = alert('hey'); 
}

答

For instance, I'm trying to just run let taskinput = document.getElementById('new-task'); and when I search the taskinput variable in the console I get a return of Uncaught ReferenceError: taskinput is not defined(…).

首先，在捆绑的WebPack模块代码在自己的范围内运行，有效地封闭，而不是在全球范围内（可以与window访问）。其次，即使您使用let（例如let a = 1）访问控制台并声明变量，即使您的控制台在全局（window）范围内运行，但如果您尝试执行window.a，您将获得undefined，因为let变量未附加到window范围。见this

Is there something I'm missing with Webpack?

也许是事实，在你的包的代码，通过的WebPack产生的，并不在全球范围内运行，如上所述。

如果要将变量公开到全局范围以便能够使用它，出于调试目的，在控制台中将其声明为window.variableName。或者，您可以在代码中添加断点，方法是在想要检出的变量之后添加debugger，而不将其暴露给全局范围。

好吧，但那我该如何有效地与DOM进行沟通？使用webpack时，是否必须使用HTML模板语言或使用JavaScript生成所有页面HTML？ – Jleibham

“好的，但是我该如何与DOM有效沟通？”一般来说，您希望将供应商代码（例如'jQuery'）放在页面的头部，因为它很可能不依赖于DOM状态以及您自己的代码，这些代码可能与位于页面底部的DOM进行交互身体标记，一切之后。也许我不明白你在问什么，在这种情况下你能提供一个例子吗？ –

我的意思是，我老实说，只是尝试一个简单的警告框上点击只用JavaScript。我正努力学习更多关于javascript的语言，而没有任何其他库的哨声。但让我抛出一些示例代码来向你展示我正在尝试做什么。 – Jleibham

答

使用浏览器控制台，您只能使用在全球范围内声明的访问变量，如果你定义一个函数内部的JavaScript变量，它不会成为全球变量。此外，使用let声明的变量永远不会成为全局变量。

如果你想在全球范围内声明一个变量，你可以把它的window的属性，例如：

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

这可能对调试很有用，但要避免在生产代码中这样做，因为使用全局变量被认为是不好的做法。

所有的

很酷谢谢！我现在就试试这个，但是我也在使用onclick命令启动时遇到了问题。虽然我想这可能植根于同一个问题。 – Jleibham

document.getElementById不与Webpack一起工作

相关推荐