keine Ausgabe von Hallo Welt nach Button im Browser

S

Stuhlbein

Mitglied
Ich komme nicht weiter. Warum wird hier "Hallo Welt!" nicht ausgegeben?
Verwende Edge, neueste Version, JavaScript ist aktiviert.
Danke für eure Hilfe.
Java: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mietspiegelrechner</title>
    <script>
        // Funktion, die aufgerufen wird, wenn der Button geklickt wird
        function evaluate() {
            document.getElementById("output").innerHTML = "<h3>Hallo Welt!</h3>";
        }
    </script>
</head>
<body>

    <button onclick="evaluate()">Auswertung starten</button>
    
    <div id="output"></div>

</body>
</html>
 
Oneixee5

Oneixee5

Top Contributor
HTML: 
<button onclick="evaluate()">Auswertung starten</button>
Du rufst hier die Funktion "evaluate" von document auf. evaluate erfordert aber Parameter und stürzt deswegen ab. Man sollte generell nicht so vorgehen - also inline-Code.

Man kann wie folgt vorgehen:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mietspiegelrechner</title>   
</head>
<body>

   <button id="btn">Auswertung starten</button>
    
   <div id="output"></div>

   <script>       
     document.getElementById("btn").addEventListener("click", () => {
       document.getElementById("output").innerHTML = "<h3>Hallo Welt!</h3>";
     });
   </script>
</body>
</html>
Script-Blöcke sind überall im HTML legal.

Es gibt auch die Möglichkeit abzufangen, wenn die Seite vollständig geladen wurde. Dann kann der Scriptblock oben im head-Block bleiben.
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mietspiegelrechner</title>
    
    <script>
      document.addEventListener("DOMContentLoaded", () => {
      
        document.getElementById("output").innerHTML = "<h3>Die Seite wurde geladen!</h3>";
        
        document.getElementById("btn").addEventListener("click", () => {
           document.getElementById("output").innerHTML = "<h3>Hallo Welt!</h3>";
        });

      });
    </script>
</head>
<body>

   <button id="btn">Auswertung starten</button>
    
   <div id="output"></div>

</body>
</html>
 
S

Stuhlbein

Mitglied
vielen Danke für deine schnelle Hilfe. Jetzt funktioniert es. Am Ende habe ich chatgpt und deepseek befragt und beide sind nicht auf diese Lösung gekommen, haben den Fehler nicht gefunden. Uff! :)
 
M.L.

M.L.

Top Contributor
Edge bietet auch die "DevTools" ( Webseite mit Edge aufrufen, Strg+Umschalt+I ) zum Analysieren von z.B. JS-Problemen. Fehlermeldung von Posting #1 dann wie folgt:
Edge_Dev_Console_JS_Fehler.JPG
 
Oneixee5

Oneixee5

Top Contributor
M.L. hat gesagt.:
Edge bietet auch die "DevTools"
Zum Vergrößern anklicken....
Jeder Browser bietet DevTools, die sich mit einem Tastendruck auf F12 öffnen lassen – eine komplizierte Tastenkombination vom Umfang einer Kurzgeschichte ist also nicht erforderlich. Allerdings muss die Konsole bei der ersten Nutzung freigeschaltet werden, was meist durch die Eingabe eines kurzen Textes geschieht.

Die DevTools von Chrome (und teilweise auch Edge) sind etwas umständlich und schwer zu bedienen, während Firefox deutlich benutzerfreundlicher ist. Zum Ablesen einer Fehlermeldung sind jedoch die DevTools jedes Browsers ausreichend.
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
A Keine Soundausgabe bei Chromium. Angular, React, JQuery - Fragen zu JavaScript 3
B [JS] Objekt existiert (keine festen Objektwerte!) Angular, React, JQuery - Fragen zu JavaScript 4
R es werden keine icons angezeigt in meinem menü Angular, React, JQuery - Fragen zu JavaScript 6
C Keine Anzeige von Bildern im Firefox Angular, React, JQuery - Fragen zu JavaScript 5
K Fragen für Praktikum-aber keine Ahnung! Angular, React, JQuery - Fragen zu JavaScript 4
I Habe selbst gar keine Ahnung und brauche Rat Angular, React, JQuery - Fragen zu JavaScript 8
B Probleme bei der Ausgabe eines Objektes. Angular, React, JQuery - Fragen zu JavaScript 2
A Textfeld hit alert Ausgabe Angular, React, JQuery - Fragen zu JavaScript 3
R binär ausgabe Angular, React, JQuery - Fragen zu JavaScript 3

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben