document.getElementById funktioniert nicht mit Webpack

Ich habe versucht, grundlegende Javascript mit Webpack zu implementieren, aber habe viel Mühe gefunden, grundlegende Methoden zum Arbeiten zu bekommen. Ich weiß, es ist wahrscheinlich ein Problem mit meiner js vor dem DOM zu laden, aber alle meine Korrekturen zu diesem Thema waren sinnlos.document.getElementById funktioniert nicht mit Webpack

Zum Beispiel, ich versuche nur let taskinput = document.getElementById('new-task'); zu laufen und wenn ich die taskinput Variable in der Konsole suchen erhalte ich eine Rückkehr von Uncaught ReferenceError: taskinput is not defined(…).

Ich habe einige verschiedene Lösungen versucht, damit dieser Code funktioniert, nachdem das DOM geladen hat, aber nichts scheint zu funktionieren.

Ich versuchte den grundlegenden Versuch, nur meine Javascript-Datei am unteren Rand des DOM zu setzen.

Ich habe wie so eine grundlegende js Methode versucht:

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

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

Ich habe versucht, jqueries

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

Ich habe versucht, die Injektion meine Javascript-Datei in meinen HTML mit dem html- mit webpack-plugin

Gibt es etwas, das ich mit Webpack vermisse?

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

Quelle

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(…).

Zu allererst Modulcode in webpack Bündel wird in einem eigenen Rahmen, effektiv in einem Verschluss, und nicht im globalen Bereich laufen (die Sie mit window zugreifen können). Zweitens, auch wenn Sie zu Ihrer Konsole gehen und eine Variable mit let, zum Beispiel let a = 1, deklarieren, obwohl Ihre Konsole im globalen Bereich (window) arbeitet, erhalten Sie , weil let Variablen nicht angeschlossen werden zum window Bereich. Siehe this

Is there something I'm missing with Webpack?

Wahrscheinlich ist die Tatsache, dass der Code in Ihre Bündel von webpack erzeugt wird, nicht im globalen Bereich läuft, wie oben erläutert.

Wenn Sie eine Variable dem globalen Bereich zur Verfügung stellen möchten, um ihn zu Debuggingzwecken in der Konsole verwenden zu können, deklarieren Sie ihn als window.variableName.Oder Sie fügen einen Haltepunkt in Ihrem Code hinzu, indem Sie debugger nach der Variablen, die Sie auschecken möchten, hinzufügen, ohne sie dem globalen Gültigkeitsbereich auszusetzen.

Quelle

2016-11-05 19:40:53

Ok, aber wie soll ich dann effektiv mit dem DOM kommunizieren? Ist es zwingend erforderlich, eine HTML-Templating-Sprache zu verwenden oder den gesamten HTML-Code der Seite mit JavaScript zu generieren, während Sie das Webpack verwenden? – Jleibham

"Ok, aber wie soll ich dann effektiv mit dem DOM kommunizieren?" Im Allgemeinen möchten Sie Herstellercode wie 'jQuery' in den Kopf der Seite einfügen, da dieser höchstwahrscheinlich nicht vom DOM-Status und Ihrem eigenen Code abhängt, der mit dem DOM am unteren Rand der Seite interagieren kann Body-Tag, nach allem anderen. Vielleicht verstehe ich nicht, was Sie genau fragen. In welchem Fall können Sie ein Beispiel geben? –

Ich meine, ich versuche ehrlich gesagt nur eine einfache Alarmbox beim Klicken mit nur Javascript. Ich versuche, mehr über die Sprache von Javascript ohne irgendwelche Schnickschnack anderer Bibliotheken zu lernen. Aber lassen Sie mich einen Beispielcode zeigen, um Ihnen zu zeigen, was ich versuche zu tun. – Jleibham

die Browser-Konsole verwenden, können Sie den Zugriff Variablen nur die global deklariert werden, und wenn Sie definieren ein JavaScript-Variable in einer Funktion, es wird keine globale Variable. Außerdem werden Variablen, die mit let deklariert sind, niemals globale Variablen.

Wenn Sie eine Variable global deklarieren möchten, können Sie es eine Eigenschaft von window, zum Beispiel machen:

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

Diese für das Debuggen nützlich sein könnten, aber vermeiden Sie es in der Produktion Code zu tun, als global mit Variablen wird als eine schlechte Praxis angesehen.

Quelle

2016-11-05 19:32:21

cool danke! Ich werde das jetzt ausprobieren, aber ich hatte auch Probleme beim Starten von Dingen mit dem onclick Befehl. Obwohl ich mir vorstelle, dass dies wahrscheinlich in derselben Sache begründet ist. – Jleibham

document.getElementById funktioniert nicht mit Webpack

Antwort

Verwandte Themen