Warum funktioniert diese HTML-Schaltfläche nicht?

Ich habe eine Schaltfläche in meinem Code, die den Text 'Hallo' in 'Auf Wiedersehen' ändern sollte, aber es funktioniert nicht. Welchen Fehler habe ich gemacht? Mein Code ist in meinem Codierprogramm korrekt eingerückt.Warum funktioniert diese HTML-Schaltfläche nicht?

Hier ist mein Code:

<!doctype html> 
<html> 
<head> 
<title>chat</title> 

<meta charset="utf-8" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

<style type="text/css">  
body { 
    margin:0px; 
} 

#topBar { 
    background-color:#33ccff; 
    width:100%; 
    height:100px; 
    z-index:1; 
    margin:0px; 
    padding:0px; 
    position:fixed; 
}

‚#logo‘ ist die ID des div, die den Text enthält, die ich ändern möchten und ‚#loginbutton‘ ist die Taste, die ich verwenden möchte.

#logo { 
    width:15%; 
    height:60px; 
    float:left; 
    background-color:white; 
    margin-left:20px; 
    margin-top:20px; 
} 
#login { 
    width:10%; 
    height:60px; 
    float:right; 
    margin-right:20px; 
    margin-top:20px; 
    border-radius:8px; 
} 
#loginbutton { --this is the button that I want to change the text with 
    background-color: #lightgrey; 
    border: none; 
    color: white; 
    text-align: center; 
    text-decoration: none; 
    font-size: 30px; 
    cursor: pointer; 
    width:100%; 
    height:60px; 
    border-radius:10px; 
    font-family:Impact; 
    line-height:60px; 
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s; 
} 
#loginbutton:hover { 
    background-color: black; 
    color: white; 
    box-shadow: 2px 2px 2px rgba(0,0,0,0.24), 2px 2px 2px 2px rgba(0,0,0,0.19); 
} 
</style>  
</head> 

<body> 
<div id="topBar">

ist die Taste und die div mit dem Text:

<div id="login"> 
<button id="loginbutton">LOG IN</button> <!--This is the button--> 
</div> 
<div id="logo">hello</div> <!--This is the text I am trying to change--> 
</div>

Hier ist mein JavaScript-Code, ich wurde mit:

<script type="text/javscript"> 
document.getElementById("loginbutton").onclick=function { 
    document.getElementById("logo").innerHTML="Goodbye"; 
} 
</script> 
</body> 
</html>

Quelle

2016-05-08 Josh Green

Sehen Sie einen Fehler in der JavaScript-Konsole? Hast du überhaupt dort nachgesehen? – Barmar

Sie angeben müssen() für die Funktion, die in diesem Fall fehlt.

<script type="text/javscript"> 
document.getElementById("loginbutton").onclick=function() { 
document.getElementById("logo").innerHTML="Goodbye"; 
} 
</script>

Quelle

2016-05-08 05:12:17

Es sollte

<script type="text/javscript"> 
    document.getElementById("loginbutton").onclick = function() { 
    document.getElementById("logo").innerHTML = "Goodbye"; } 
    //further code 
</script>

Quelle

2016-05-08 05:21:32 Yomesh

Sie sollten erklären, was das Problem mit dem Original war und was Sie geändert haben, um es zu beheben. – Barmar

Ich empfehle stattdessen eine event listener verwenden, Ihre Click-Handler

<script type="text/javscript"> 
    document.getElementById("loginbutton").addEventListener('click', function(e) { 
    document.getElementById("logo").innerHTML = "Goodbye"; 
    }); 
</script>

aktualisieren

Ihre bestehenden Code hinzufügen wurde ein Syntaxfehler es machen funktioniert nicht richtig, wo es die Klammer () nach der fehlt function Wort und sollte wie folgt aussehen

document.getElementById("loginbutton").onclick=function() {

Quelle

2016-05-08 05:47:30 LGSon

Whale dies besser sein Stil, adressiert es nicht das eigentliche Problem in seinem Code, der ein Syntaxfehler in der Funktionsdefinition ist. – Barmar

@Barmar also richtig, hätte das angesprochen wenn das erste mal gepostet ... aktualisiert und in meinen kommenden Antworten steht – LGSon

die Rechtschreibung text/javscript nicht korrekt ist. Korrigieren Sie die Schreibweise und fügen Sie nach dem Funktionswort () hinzu.

den korrigierten Code-Schnipsel Siehe unten:

<script type="text/JavaScript"> 
document.getElementById("loginbutton").onclick=function() { 
    document.getElementById("logo").innerHTML="Goodbye"; 
} 
</script>

Quelle

2016-05-08 06:46:50

Warum funktioniert diese HTML-Schaltfläche nicht?

Antwort

Verwandte Themen