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

25.04.2020, 15:33

Der Timer hat übrigens "null" als Speicher deswegen hatte ich erst Zeit als normalen Text ausgeben wollen aber das geht halt auchn nicht

3 Antworten

MrCreeper2011

25.04.2020, 15:41

Probier mal das Script am Ende vom Body zu laden

Woher ich das weiß:Hobby – Ich programmiere seit ich 9 Jahre alt bin

FelixFeuerdorn

Fragesteller

25.04.2020, 15:41

und wie mach ich das?

FelixFeuerdorn

Fragesteller

25.04.2020, 15:47

Hat sich erledigt! XD Weiß jetzt was du meintest und es hat geholfen Danke

NoHumanBeing

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

25.04.2020, 15:50

Der Dokumentbaum ist noch nicht aufgebaut, wenn das Script ausgeführt wird.

Packe es in einen Event-Handler.

window.onload = function() {
    const timer = document.getElementById('az');
    const zeit = new Date();
    const std = zeit.getHours();
    const m = zeit.getMinutes();
    const sec = zeit.getSeconds();
    const ms = zeit.getMilliseconds();
    const zeit_str = std + ':' + m + ':' + sec + '.' + ms;
    timer.innerHTML = zeit_str;
};

var funktioniert zwar, ist aber inzwischen "deprecated" (veraltet). Um Variablen zu deklarieren verwendet man inzwischen let, um (Laufzeit-)Konstanten zu deklarieren (d. h. wenn Du den Wert hinterher nicht mehr verändern musst), verwendet man const.

Beachte zudem, dass Du in Deinem Script timer.innerHTML auf "zeit" setzt (das ist der String "zeit") anstatt zeit (das ist die Variable).

Das HTML ist übrigens ... "seltsam". Ich würde das ganze eher so schreiben (auch wenn das auch noch nicht ganz "perfekt" ist).

<!DOCTYPE html>
<html>
    <head>
        <title>
            Seitentitel
        </title>
        <style type="text/css" src="design.css"/>
        <script type="text/javascript" src="programm.js">
        </script>
    </head>
    <body>
        <div>
            Aktuelle Uhrzeit: <div id="az" style="display: inline-block"/>
        </div>
    </body>
</html>

FelixFeuerdorn

Fragesteller

25.04.2020, 15:55

Das mit dem var hab ich nur genommen weil let logischer nicht funktioniert hat, und das HTML-Documnt habe ich auch so aufgebaut (abgesehen vom Div, welches man eigentlich nicht mehr benutzt) wie du, ich hab das HTML-Document nur aus meiner Datei kopiert und eingefügt.

und ich hab ja meine Frage noch ergänzt das ich zu testzwecken den Timer erstmal auf "Zeit" dem String gesetzt habe.

regex9

25.04.2020, 16:39

Das geht nicht:

<style type="text/css" src="design.css"/>

Der Tag gehört nicht zu den selbstschließenden. Um CSS-Dateien einzubinden, müsstest du den link-Tag verwenden. Das type-Attribut brauchst du im Übrigen nicht mehr.

NoHumanBeing

26.04.2020, 02:59

@regex9

Jepp, Du hast natürlich recht. Korrekt wäre ...

<link href="design.css" rel="stylesheet" type="text/css"/>

... weiß überhaupt nicht, wie ich auf den anderen Unsinn komme. :-)

Dory1

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

JavaScript

25.04.2020, 15:50

Dein JavaScript wird sofort ausgeführt wenn du es lädst. Das heißt alle Elemente, die in deinem Skript angesprochen werden ("#az") müssen auch bereits geladen sein. In deinem Fall wird das Element aber nach dem JavaScript geladen. Du solltest dein Skript also ans Ende des Dokuments verschieben wo bereits alle benötigten HTML-Elemente geladen wurden:

   ...
   <script src="Programm.js"></script>
</body>

Ich weiß das es so nicht funktionieren kann aber wie geht es denn richtig???

Was mache ich falsch? Der Error ist :

Uncaught ReferenceError: require is not defined at Test.html:12:28

Mein Code

<!DOCTYPE html>
    <html >
        <head>
        <title>Test</title>
        </head>
            <body>


            </body>

            <script>
                const fs = require("fs");
                fs.readFile("test.txt", (err, data) => {
                if (err) throw err;

                console.log(data.toString());
                });
            </script>
    </html>

...zur Frage

Wie bekomme ich es hin, dass der alert bei javascript auf der Website angezeigt wird und nicht in einem extra Fenster?

Ich habe es schon mit document.write und document.get versucht. Die Aufgabenstellung lautet wie folgt:

"Erstellen Sie eine html Seite, die einen Button enthält. Klickt man auf den Button, wird eine Java Script Funktion aufgerufen, die einen beliebigen Text als alert auf der Seite ausgibt. "

Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test</title>
   </head>
   <body>
      <form name="button">
      <input type=button value="Alert" onclick="Box()">
      </form>
      <script language="JavaScript">
         function Box() {alert("Alarm!!")};
      </script>
   </body>
</html>

...zur Frage

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

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

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

...zur Frage

Warum wird alert nicht ausgeführt (Javascript)?

Hi ich Frage mich warum mein alert nicht ausgeführt wird wenn ich auf den buten klicke ...könnte jemand der Javascript beherrscht mir den Fehler sagen ?

Code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

alert ("willkommen hier");

</script>

var beschreibung = "super,mega,hammer";

var alter= 25;

var vergeben = false;

var name = "boy withb the spoon";

var leer = null;

document.write(name + "ist" + beschreibung + alter + "und sein status ist vergeben " + vergeben);

</script>

//diese variable ist sehr komplieziert

function geklickt(){

alert ("willkommen hier zum zweiten mal");

}

</script>

<form>

</form>

</body>

</html>

...zur Frage

HTML und JS Seitentitel alle 0.2 Sekunden ändern?

Ich bin gerade dabei, eine Seite zu erstellen, die die Möglichkeit hat auf Knopfdruck auf einen Button den Title zu ändern. Das habe ich geschafft, nur wenn ich diesen Titel alle X Sekunden ändern möchte, wie mache ich das?

Ich bedanke mich für verstandlichen Code!

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Title Changer</title>
        <link rel="stylesheet" href="./styles.css" />
        
    </head>


    <body>
        <script src="./app.js"></script>
        Click the button below to make the title go cRaZyYyYyY!
        <button onclick="makeitCrazy()">Make it cRaZyYyYyY</button>
    </body>
</html>

CSS:

body{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
}

JavaScript:

async function makeitCrazy(){
    while(true){
        document.title = 'One';
        await (1);
        document.title = 'Two';
    
    }
    
}

...zur Frage

Wie kann ich eine HTML und JavaScript Login-Funktion mit nur einer Passwortmöglichkeit machen?

Ich will eine Login-Funktion für eine eigene Internetseite machen, wobei nur mein eigenes Passwort funktionieren soll. Es kommt aber immer die Meldung, dass das Passwort falsch sei.

Das ist mein Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Seitenname | Login</title>
    <meta charset ="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <header><img src="bilder/Logo.jpg" alt="Logo"></header>
      <sectionAnmeldung>
        <div class="Anmelden">
          <h1>Anmelden</h1>
          <a>Passwort:</a>
          <input type="password" name="myPw" placeholder="Password" />
          <script>
            function pwRichtig() {
              var x = document.getElementsByName("myPw").value;
              var pw = "password123";

              if (x == pw) {
                document.open("hauptseite.html");
              }
              else {
                alert("Falsches Passwort!");
              }
            }
          </script>
          <input type="submit" name="" value="Einloggen" onclick="pwRichtig()" required />
        </div>
      </sectionAnmeldung>
    </div>
  </body>
</html>

...zur Frage

Mehrere Parameter durch einen Button ausgeben in Javascript?

Ich lerne gerade Javascript mit einer Tutorial Reihe und der Mann im Tutorial hat mehrere Parameter benutzt um einen Liebes Test zu Programmieren. Ich wollte dann das man erst einen Knopf drücken muss um das Ergebnis angezeigt zu bekommen. Aber es funktioniert nicht denn wenn ich auf den Button drücke, passiert nichts. woran liegt das ? Das ist mein Code: (Die formatierung ist eigentlich anders)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function LiebesTest(name1, name2){

document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte ");

var punke;

punkte= (name1+name2).length;

}

LiebesTest("Filme", "serien");

</script>

<form>

<input onclick="text" type="button" value="Test!"

</form>

</body>

</html>

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

JS - Wie kann ich die Höhe eines Rechtecks mit einem Schieberegler / Slider (range) im Canvas vergrößern und verkleinern?

Hallo,

meine Code sieht gerade so aus. Es funktioniert aber nicht. Was müsste ich hier ändern?

<hmtl>
  <head>
    <title>hi guys</title>
  </head>
  <body>
    Schieberegler:
    <br>
    <canvas id="canvas" height='400' width='600'></canvas>
  </body>
  <br>
  <input id='slider' type='range' max="100" min="0">
  <p id='outpRadius'> 50 </p>
  <input type='color'>
  <hr>
  <script>
    'use strict';

    window.onload = function() {
      var slider = document.getElementById('slider')
      var output = document.getElementById('outpRadius');
      slider.addEventListener('input', aendereRadius, false)

      function aendereRadius() {
        output.innerHTML = slider.value;
        console.log(output.innerHTML);
      }

      var canvas = document.getElementById('canvas');
      canvas.style.backgroundColor = 'yellow';
      var ctx = canvas.getContext('2d');
      ctx.fillRect(50,50,50,output.innerHTML);
    }
  </script>
</html>

...zur Frage

Was funktioniert mit meinem Java Script/html code nicht?

Ich versuche gerade eine einfache Passwortabfrage mit Javascript zu programmieren. Ihr müsst mir auch nicht erst sagen das ich es lieber mit php machen sollte, ich weiß dass das überall steht aber das kapier ich überhauptnicht. Hier ist mein code:

<!DOCTYPE html>
<html>
    <head>
        <title>Basic Web Page</title>
        <script>
            let rightpass = 'hallo';
            let inpu = document.getElementById(input);
            let dkfjl = inpu == rightpass;
            function passwortabfrage() {
                if (dkfjl) {
                    alert('Es hat geklappt')
                } else {
                    alert('failed')
                }
            }
        </script>
    </head>
    <body>
        <form>
        <input type="text" id="input" >
        <input type="submit" onclick="passwortabfrage()">
        </form>
    </body>
</html>

Es geht mir dabei im Moment nicht um Sicherheit, sondern nur darum zu wissen wie was nicht funktioniert. Viele Grüße und Danke für eure Antworten

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

Dreieck ausgeben mit for schleife in Javascript?

Hallo,

ich wollte Fragen wie ich ein Dreieck ausgeben kann mit Javascript, dabei soll das Dreieck vorher mit einer Zahl mit "prompt" eingegeben und mit sternchen ausgegeben werden.

Am Ende sollte es so aussehen wenn man z.B. die Zahl 4 eingegeben hat:

***

****

Zurzeit habe ich schon einen Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
        function sterne(){
            var zahl = prompt("Zahl eingeben");
            for(var i =0; i <zahl; i++){
                ausgabe.innerHTML += "*" + "<br>";
            }
            
            document.querySelector('output').innerText = 
            "Anzahl der Zeilen: " + zahl;
        }
            </script>
        </head>
        <body onload="sterne()">
            <output></output>
            <br>
            <div id="ausgabe"></div>
        </body>
    </html>

Der mir das hier ausgibt:

Anzahl der Zeilen: <Zahl>

Ich vermute man braucht eine weitere For schleife oder ein if, könnte mir da jemand weiterhelfen? Danke für mögliche Antworten.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen