Question

document.body.innerHTML = "An error occurred. Please try to login again.<br>"; 

document.body.innerHTML += 'Username: <input type="text" name="username"><br>'; 
document.body.innerHTML += 'Password: <input type="password" name="password"><br>'; 
document.body.innerHTML += "<input type='submit' value='Login' onclick='alert(document.getElementById('password').value)'>" 

Nach diesem Code ausgeführt wird, und klicken Sie dann auf die Login-Button gibt die Chrome JavaScript-Konsole zurück:

SyntaxError: expected expression, got '}'

Wie kann ich es beheben?

Answer 1

Sie müssen die Anführungszeichen ändern und sie in der Javascript-Code zu entkommen:

document.body.innerHTML = "An error occurred. Please try to login again.<br>"; 
 

 
document.body.innerHTML += 'Username: <input type="text" name="username"><br>'; 
 
document.body.innerHTML += 'Password: <input type="password" name="password" id="password"><br>'; 
 
document.body.innerHTML += "<input type='submit' value='Login' onclick='alert(document.getElementById(\"password\").value)'>";

As for the reason "why the browser throws this specific error?", here is the question:

Da der Code falsch ist, der Browser tatsächlich sehen den folgenden Code:

(function(event){alert(document.getElementById(
}) 

Wie Sie sehen können - nach der document.getElementById( gibt es eine Schließung {, worüber dein Browser dich anschreien wird.

Answer 2

Gerade Anführungszeichen entkommen

document.body.innerHTML = "An error occurred. Please try to login again.<br>"; 
 

 
document.body.innerHTML += 'Username: <input type="text" name="username"><br>'; 
 
document.body.innerHTML += 'Password: <input type="password" name="password" id="password"><br>'; 
 
document.body.innerHTML += "<input type='submit' value='Login' onclick='alert(document.getElementById(\"password\").value);return false;' />"