Wieso funktioniert mein JavaScript-Code nicht?
<!DOCTYPE html>
<html>
<body>
<p>Please choose:</p>
<form>
<button id="login" value="Login" onclick="Login();">Login</button>
<input type="button" onclick="register" value="Register">
<br>
</form>
<script>
function Login() {
window.location.href='https://www.conductor.com/';
}
</script>
</body>
</html>
Das ist mein Code und er funktioniert nicht. Aber ich weiß nicht, wieso.
3 Antworten
Hi Baexus,
das ist ganz einfach zu erklären: Mit 'window.location.href' kannst du nur die URL lesen aber nicht eine neue Seite aufrufen. Um das zu lönsen brauchst du nur das 'href' am Ende entfernen; fertig!
Maddoc66 hat absolut recht. Wenn dein Button eigentlich nur ein link ist, nimm lieber ein <a> Element. Über CSS kannst du das dann wie einen Button aussehen lassen. Das wäre in dem Fall die richtige Lösung.
Wie McSKB aber sehr gut zeigt, brauchst du bei manchen Events preventDefault um das Browser-Standardverhalten zu unterbinden. Hier ist die Funktion gut dokumentiert: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
Allerdings reicht es vermutlich in dem Fall dem Button Type=Button zu geben, damit er das Formular nicht absendet.
Standardmäßig sendet ein <button> innerhalb eines <form>-Elements beim Klicken ein Formular ab. Das bewirkt, dass die Seite neu geladen wird!
Ein:
event.preventDefault();
verhindert die standardmäßige Funktion des Formulars.
So sieht der Code dann aus:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Login() {
/* WICHTIG */
event.preventDefault();
window.location.href = 'https://www.conductor.com/';
}
</script>
</head>
<body>
<p>Please choose:</p>
<form>
<button id="login" value="Login" onclick="Login()">Login</button>
<input type="button" onclick="register" value="Register"><br>
</form>
</body>
</html>
Chat GPT ? )