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

2 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, IT

02.06.2022, 21:02

Da in einem Browser HTML-Dokumente Zeile für Zeile interpretiert werden, spielt es eine Rolle, wann, wo und/oder wie Scripte eingebunden/ausgeführt werden. Wenn dein Script an der falschen Stelle steht, wird dieses ggf. schon von deinem Browser ausgeführt, obwohl dieser die Elemente noch nicht kennt (interpretiert hat).

Je nach Programmlogik musst du entscheiden, wann das Script geladen und ausgeführt werden kann oder ausgeführt werden soll. Das gilt für externe Scripte als auch für eigene Funktionen und der Gleichen. In der Regel wird JavaScript aber am Ende des <body> Elements vor dem schließenden <body> Tag eingebunden.

Neben dieser Herangehensweise gibt es Attribute für das <script> tag, mit denen festgelegt werden kann, ob Scripte asynchron (async) oder verzögert (defer) geladen werden. Das async-Attribut wird z.B. bei Thirt Party Scripten verwendet, während mit dem defer-Attribut das laden und ausführen hinten angestellt wird.

// script wird zum schluss geladen
<script src="path/app.js"></script>
</body>

// paralleles (asynchrones)laden
<script src="path/app.js" async></script>

// laden und ausführen verschieben 
<script src="path/app.js" defer></script>

JavaScript defer und async - einbinden und ausführen

Woher ich das weiß:Berufserfahrung

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

02.06.2022, 16:16

es kommt darauf an wo du wann was machst , wenn du ein script im header hast und der DOM noch gar nicht existiert du aber ein Element haben willst, wird das nix .

dafür gibt es z.b. die

<body onload="hier deine funktion">

oder im javascript mit window.onload ... arbeiten .

funktion damit du javascript auch erst ausführst wenn der DOM vollständig existiert .

yasuoZ

Fragesteller

02.06.2022, 16:18

Vielen Dank für die schnelle Antwort.
Werde das Ganze mal ausprobieren!

Script ist im Header implementiert und Function wird im Body aufgerufen

TechPech1984

02.06.2022, 16:19

@yasuoZ

schau hier

https://www.w3schools.com/jsref/event_onload.asp

oder hier

https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onload

yasuoZ

Fragesteller

02.06.2022, 16:20

@TechPech1984

Danke für die Links!

yasuoZ

Fragesteller

02.06.2022, 16:34

Hätte mal erwähnen sollen, dass ich in der HTML-Datei ein onclick-Event mit besagter Funktion habe.

Wie kann ich javascript die Element-IDs vermitteln, wenn die Dokumente unabhängig von einander sind.

Lösung sind wahrscheinlich wirklich Übergabeparameter

TechPech1984

02.06.2022, 16:36

@yasuoZ

ohne code weiss das doch keiner .

uploade dein code entwder auf https://jsfiddle.net/ oder https://pastebin.com/

dieses gesabbel und beschreibung geht hier allen auf den nerft . wenn du ein konretes problem hast, dann mach auch ein konkretes problem daraus . so denkt und ließ jeder was anders . und beim programmieren sind die wege unendlich .

es gibt auch das event target . aber das hilft auch nur bei bestimmten problemen , bei anderen wieder nicht .

Ähnliche Fragen

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?

...zur Frage

HTML mehrere onclick?

<script>function play() {var audio = document.getElementById("sd_00143");audio.play();}</script><a href="#A1Acura RSX SH_"><img src="bilder/NFSU2/A1Acura RSX SH_.jpg" id="A1Acura RSX SH_" width="220" height="120" onclick="play()"><audio id="sd_00143" src="sd_00143.mp3"></audio></a>

<script>function play() {var audio = document.getElementById("Sexy Beam");audio.play();}</script><a href="#B4Audi A3 nude tits_"><img src="bilder/NFSU2/B4Audi A3 nude tits_.jpg" id="B4Audi A3 nude tits_" width="220" height="120" onclick="play()"><audio id="Sexy Beam" src="Sexy Beam.wav"></audio></a>

Beide Bilder spielen beim Anklicken Sexy Beam.wav. Kann jemand die multiplen Audiodateiaufrufe in einer einzigen HTML-Seite korrigieren?

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

Einbindung von JS und CSS klappt nicht, könnte die Fehlerursache sein?

Hallo Leute, ich wollte gerade zum besseren Verständnis von getElementById() ein Beispiel nachbauen, dazu habe ich ein HTML-Dokument erstellt und die entsprechenden JavaScript- und CSS-Dateien eingebunden. Die CSS-Datei im Kopfbereich, die JS-Datei vor dem schließenden body-Tag. Am Ende soll ein roter Rahmen um eine Tabelle erzeugt werden.

Ich dachte erst, dass es am falsch eingegebenen Pfad liegen könnte, aber der ist soweit ich sehe auch richtig. Egal was ich tue, die HTML-Datei wird ausgegeben, aber ohne die JS- und CSS-Komponenten.

Hier der zugehörige JS-Code:

Hier der JS-Code:

function init() {
    // Selektion nach ID
    const mainElement = document.getElementById("main");
    mainElement.className = "border";
}

Hier der CSS-Code:

.border {
    border: thick solid red;
    border-radius: 25px;
    padding: 5px 25px 25px 25px;
}

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

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

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

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zur Frage

Html+Js Code funktioniert nicht?

Hallo, ich habe ein Problem mit meinem Code. Hier ist er:

<script>
document.getElementById(“Test gelungen”).innerHTML = test;
</script>

<p>Ist der <span id=“test”><span>

Angezeigt werden soll eigentlich: Ist der Test gelungen

Es wird aber nur “Ist der” angezeigt. Das Java Script ist eigentlich in einer seperaten Datei. Meine Frage: Was ist falsch?

Ich danke euch sehr für eure Antworten!

...zur Frage

JS variablen in Html ausgeben, wobei die Javascript Datei eigenständig ist?

Wir bräuchten eine Lösung um unsere durch eine API generierten Daten auf unserer HTML Seite auszugeben.

Wir haben zum Beispiel ein let test = "Irgendwas" in der JS Datei und wir wollen den String in der HTML Datei ausgeben bzw auf der Website anzeigen lasse. Also es wird keine JQuery verwendet und die Daten liegen einfach als String vor.

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

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

Was möchtest Du wissen?

Deine Frage stellen