Javascript auslagern (HTML)?

Hallo,

wenn ich mit <script> einen Javascriptcode in HTML schreibe, geht alles, wenn ich das Script auslagere also in eine .js Datei schreibe und genau den gleichen Text wie im HTML Code dort einfüge, ohne das <script> </script>, dann geht es irgendwie nicht. Ich habe die Datei im Head so verlinkt <script src="js/button.js"></script>

Wieso geht es dann nicht mehr?

4 Antworten

TechnikSpezi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

PC, Computer

26.03.2020, 19:12

Vermutlich liegt es daran, dass du es direkt zu Beginn an eingebunden hast.

Beispielsweise funktioniert es nicht, wenn du deinen Button mit JavaScript funktional machen möchtest und JavaScript direkt zu Beginn einbindest, der Button aber im HTML Dokument erst später erzeugt wird. Deswegen solltest du einmal das <script>-Tag ans Ende vom <body> setzen:

<!DOCTYPE html>
<html lang="de">
    <head>
    </head>
    <body>
      <script src="js/button.js></script>
    </body>
</html>

Mehr dazu inkl. Beispiel findest du hier:

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Einbindung_in_HTML

Woher ich das weiß:Studium / Ausbildung

Instabelike

Fragesteller

26.03.2020, 19:28

Hat nichts gebracht, aber mit console.log hab ich heraus gefunden, dass die Datei tut. Soll ich die variable irgendwie ändern?

Instabelike

Fragesteller

26.03.2020, 19:32

Ich habe den Fehler gefunden, doch warum muss ich das ganz am Ende (unter den Footer) lazieren?? Macht irgendwie keinen sinn, da es macht, dass wenn man scrollt ein Knopf angezeigt wird, um nach oben zu gelangen.

TechnikSpezi

26.03.2020, 19:36

@Instabelike

Mmh, kannst du den Code mal zeigen? Aber wie gesagt, grundsätzlich die Referenz (also das <script>-Tag) als letzten Tag vor </body> setzen, sodass auch alles schon erzeugt wurde. Je nach Quellcode kann das aber variieren. Also wie gesagt: Grundsätzlich, nicht immer.

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, JavaScript

26.03.2020, 20:21

Welche Fehlermeldungen kommen denn in der Browser-Konsole? Wird das Script überhaupt geladen?

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Instabelike

Fragesteller

27.03.2020, 13:43

Schon gelöscht, aber danke

brudermusssoos

26.03.2020, 19:13

Probier mal das Script jsbutton zu nennen.

Instabelike

Fragesteller

26.03.2020, 19:29

hat nichts geändert

RayLaMue

26.03.2020, 19:24

Hi ,

bin mir nicht sicher deine Frage richtig verstanden zu haben und bin selbst Anfänger.

Doch ich habe vermutlich das gleiche Problem.

Ich glaube es liegt hieran:

Wenn du das Script in deinen HTML-code schreibst, sieht der Code wohl so aus:

<Script>
$( document ).ready(function() {
    console.log( "juhuuuuu!" );
});
</Script>

Wenn man den Code in eine *.js-Datei auslagern möchte , muss er glaub ich verändert werden

..so, oder so ähnlich :

<Script > muss weg
document.ready muss weg...

bin echt auf die richtige Antwort gespannt ...

Instabelike

Fragesteller

26.03.2020, 19:30

Habe nichts davon drin und es tut nicht, die Datei wird mit console.log aber erkannt, also der Text wird ausgegeben

regex9

26.03.2020, 19:52

$(document).ready kann immer bleiben, sofern man irgendwie vorher jQuery lädt.

Ähnliche Fragen

JS script richtig importieren?

Wenn ich meine JS Skripte in meinem HTML Dokument schreibe funktionieren die Super. Wenn ich diese dann aber in den Header Schreibe

 <script type="text/javascript" src="scripts/JavaScript.js"></script>

Dann geht alles was mit dem Script zutun hat nicht.

...zur Frage

Javascript in HTML einbinden - Problem?

Wie soll ich JS in HTML einbinden? Habe das immer so gemacht:
<script language="javascript" type="text/javascript" src="dateiname.js"></script>

Aber wenn ich dann z.B:

drawBoxes('yyy bbb ggg');

Mache, dann passiert in der HTML Seite garnichts.
LG

CSS in HTML einzubinden funktioniert letzterzeit komischerweise auch nicht. Muss das dann immer intern in der HTML-Datei machen.

...zur Frage

JavaScript in HTML aufrufen?

Hallo zusammen
Ich brauche eure Hilfe, weil ich noch nicht viel mit JS gemacht habe.

Ich habe bis jetzt immer mein <script>-Tag mit Funktionen und Variablen in der HTML-Datei gehabt - hat immer funktioniert.

Jetzt will ich das <script>-Tag in eine eigene Datei ablegen.
Um das zu verschachteln und projektorientiert zu machen, dass man nicht für jede Seite die Funktionsänderung vornehmen muss.

Deswegen hab ich mit "<script src="/fileadmin/public/js/myScript.js"></script>" die JS-Datei in die HTML-Datei implementiert.

Mein Problem: Die Events führen nicht mehr aus.

Liegt das an daran, dass document.getElementById sich die ID aus dem internen dokument sucht?
Wie kriege ich, dass die ID von der HTML-Datei angesprochen werden?

Vielen Lieben Dank und liebe Grüße

...zur Frage

Ton abspielen Javascript?

Hallo,

Ich möchte auf meiner html Seite einen Sound abspielen, wenn ein Button geklickt wird. Die Seite läuft über den Localhost.

html:

 <script src="script.js"></script>
    <script src="anmeldungj.js"></script>
   <script src="/socket.io/socket.io.js"></script>
    <audio id="ringtone" src="Sound2.mp3"></audio>

JavaScript

var RingSound;
var Sound = new Audio('Sound2.mp3')
RingSound = document.getElementById("ringtone");
...
function Send() {
    if (delay && messageInput.value.replace(/\s/g, "") != "") {
        delay = false;
        setTimeout(delayReset, 1000);
        socket.emit("send", messageInput.value);
        messageInput.value = "";
        RingSound.play();
        Sound.play();
    }
}

Der Pfad stimmt:

Es wird aber kein Sound abgespielt, ich habe es über zwei Varianten versucht.

Ich hoffe jemand kann mir helfen

Jannik

...zur Frage

Javascript verlinken funtioniert nicht?

Hallo,

Ich habe das seltsame Problem, dass ich eine Javascript Datei nicht verlinken kann. Bzw. dass der Inhalt auf der Javascript Datei nicht ausgeführt wird.

So habe ich die Datei im <head> Tag verlinkt:

Der Inhalt auf der Javascript Datei ist folgender:

"use strict"

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

Wenn ich den Javascript Code allerdings in der selben HTML Datei ausführe mit

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

</script>

funktioniert er.

Woran kann das liegen? Ich habe schließlich weitere Javascript Dateien verlinkt die alle funktionieren. Auch habe ich die JQuery Datei im <head> Tag verlinkt. Ich benutze den aktuellen Chrome Browser. Mit Firefox habe ich es auch schon probiert. Dort geht es auch nicht.

Als Editior verwende ich Visual-Studio-Code.

Ich bin gerade ziemlich verwirrt. Habe ich irgendwo einen Fehler gemacht?

...zur Frage

JavaScript UI ohne HTML / CSS?

Ist es möglich, komplett ohne HTML etwas zu programmieren, das aber eine Oberfläche hat und nicht nur im schwarzen Terminal läuft?

Man könnte mit Canvas auch ein bisschen zeichnen und ein paar Spiele entwickeln, aber dann braucht man trotzdem mindestens ein ganz kleines bisschen HTML für <canvas> und script src.

Wenn es möglich ist: Was wäre das einfachste Projekt, das ich umsetzen könnte?

...zur Frage

JavaScript funktioniert nicht in externer Datei?

Hallo,

ich bin dabei Javascript zu lernen und komme irgendwie mit der externen Datei von Javascript nicht klar. Das einzige, was ich machen möchte ist, die aktuelle Uhrzeit anzeigen zu lassen. in der HTML-Datei selbst funktioniert das, aber nicht in der externen Datei. Muss ich vielleicht noch irgendetwas beachten, was ich nicht gemacht habe? Die einzelnen Bereiche schiebe ich unten rein.

HTML:

<html>
  <head>
    <title>Seitentitel</title>
    <meta charset="UTF-8">
    <link href="Design.css" rel="stylesheet">
    <script src="Programm.js"></script>
  </head>
  <body>
    <p id="az">Aktuelle Uhreit<p>
  </body>
</html>

CSS:

html {
  text-align: center;
  background-color: green;
}

p {
  font-size: 30pt;
  margin: 22%;
  color: darkred;
}

JavaScript:

var timer = document.getElementById("az");
document.write(timer);
var zeit = new Date();
var std = zeit.getHours();
var min = zeit.getMinutes();
var sec = zeit.getSeconds();
var ms = zeit.getMilliseconds();
zeit = std + ":" + min + ":" + sec + "." + ms;
timer.innerHTML = "zeit";

...zur Frage

Kennt jemand ein Counter Script, wo die Aufrufe/Klicks in einer counter.txt Datei im Verzeichnis abgespeichert werden - wenn möglich in HTML?

z.B

<script language="JavaScript" src="Die Website Link/counter/counter.php?ac=js">
</script>

couter.php

<?php
function get_urlvar($var_name){
	if(!isset($_GET[$var_name])){
		return ("");
	} else {
		return (trim(urldecode(mysql_escape_string($_GET[$var_name]))));
	}
}
$File = fopen('./daten/cont.txt', 'r+'); 
$Counter = fread($File, filesize('./daten/cont.txt')); 
$Counter++;
rewind($File);
fwrite($File, $Counter); 
fclose($File);
$ac=get_urlvar("ac");
if ($ac == 'js'){
echo "document.write(' Sie sind Besucher Nr. $Counter ');\n";
}else {
echo 'Sie sind Besucher Nr. '.$Counter;
}
?>

wäre ein beispiel. Bei mir geht das aber nicht, keine Ahnung warum. Hat jemand eine andere oder eine etwas einfachere Idee (die Aufrufe/Klicks müssen aber als Datei / txt abgespeichert werden).

Danke im voraus.

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

JavaScript/DOM lokale Datei auslesen?

Hay, ist es möglich mittels js auf einer html Seite eine txt auszulesen und in ein Div zu packen? Ich habe es mit Fetch versucht da kommt aber nur das er die Datei nicht findet.

...zur Frage

Text später einblenden mit Javascript? Muss man es durch einen Link machen, wo die ganze Webseite neu geladen wird oder geht es einfacher?

Hey, Bin in dem Gebiet Javascript nicht gerade ziemlich erfahren. Ich will nicht viel mit Javascript machen, nur möchte ich auf meiner Webseite an einen Text so etwas wie (Weiterlesen) einbinden, muss ich dazu dann einfach in HTML einen Link erstellen, zur einer neuen Webseite, wo ich quasi alles kopiere und nur den restlichen Text einfüge ? Nein oder, man macht ja nicht für jede Kleinigkeit eine ganz neue Seite. Wie stelle ich das dann in HTML und anschließend mit der Javafunktion an?

PS: Hab eigentlich auch schon den passen Javascriptcode gefunden, nur ich verstehe halt hauptsächlich nicht, ob man in HTML eine komplett neue Webseite dafür machen muss ??

...zur Frage

HTML/JS Icon Link lädt zu lange?

Hey,

ich lade meine Icons über diesen Link:

<script src="https://kit.fontawesome.com/03a9efeaa3.js" crossorigin="anonymous"></script>

Dieser Link ist im head. Mein anderer script-Tag ist im body und lautet so:

<script type="module" src="./JS/main.js"></script>

Nun habe ich das Problem, dass wenn ich meine Seite neu lade, es lange lädt und dann abstürzt.

Die Konsolenausgabe sieht so aus:

Was kann ich tun?

...zur Frage

pixelmatch in browser nutzen?

Wenn ich den link auf der github seite verwende:

Code:

<script src="https://bundle.run/pixelmatch"></script>

wird keine datei gefunden, der pfad existiert nicht

wenn ich das letzte release runterlade und einbinde

Code:

<script src="myserver/js/pixelmatch/bin/pixelmatch"></script>

erhalte ich folgende fehlermedlung

Code:

const PNG = require('pngjs').PNG;
ReferenceError: require is not defined

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen