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'); 
}

來源

2016-11-05 Jleibham

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，而不將其暴露給全局範圍。

來源

2016-11-05 19:40:53

好吧，但那我該如何有效地與DOM進行溝通？使用webpack時，是否必須使用HTML模板語言或使用JavaScript生成所有頁面HTML？ – Jleibham

「好的，但是我該如何與DOM有效溝通？」一般來說，您希望將供應商代碼（例如'jQuery'）放在頁面的頭部，因爲它很可能不依賴於DOM狀態以及您自己的代碼，這些代碼可能與位於頁面底部的DOM進行交互身體標記，一切之後。也許我不明白你在問什麼，在這種情況下你能提供一個例子嗎？ –

我的意思是，我老實說，只是嘗試一個簡單的警告框上點擊只用JavaScript。我正努力學習更多關於javascript的語言，而沒有任何其他庫的哨聲。但讓我拋出一些示例代碼來向你展示我正在嘗試做什麼。 – Jleibham

使用瀏覽器控制檯，您只能使用在全球範圍內聲明的訪問變量，如果你定義一個函數內部的JavaScript變量，它不會成爲全球變量。此外，使用let聲明的變量永遠不會成爲全局變量。

如果你想在全球範圍內聲明一個變量，你可以把它的window的屬性，例如：

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

這可能對調試很有用，但要避免在生產代碼中這樣做，因爲使用全局變量被認爲是不好的做法。

所有的

來源

2016-11-05 19:32:21

很酷謝謝！我現在就試試這個，但是我也在使用onclick命令啓動時遇到了問題。雖然我想這可能植根於同一個問題。 – Jleibham

document.getElementById不與Webpack一起工作

回答

相關問題