Undisabled eines Buttons durch JavaScript?
Hallo,
ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.
Mein HTML Code:
<body>
<button id = "button" disabled> </button>
<button onclick = "Test() " ></button >
</body>
<script src = app.js></>
}
Mein Javascript Code:
let button = document.getElementbyid('button' );
function Test() {
button.disabled = false;
}
Weiß jemand an was es liegen könnte?
3 Antworten
HTML:
<button id="btn1" disabled>Action</button>
<button onclick="enableBtn('#btn1')">Activate</button>
JavaScript:
const enableBtn = (e) => {
let btn = document.querySelector(e);
btn.removeAttribute('disabled');
}
Die Funktion beschränkt sich nicht auf ein konkretes Element, sondern ist mithilfe des Funktionsparameter (e) beliebig oft wiederverwendbar. Falls du also weitere deaktivierte Element hast, können diese auch mit dieser Funktion aktiviert werden.
Beispiel - Mehrere deaktivierte Buttons:
<button id="btn1" disabled>Action 1</button>
<button id="btn2" disabled>Action 2</button>
Buttons aktivieren:
<button onclick="enableBtn('#btn1')">Activate 1</button>
<button onclick="enableBtn('#btn2')">Activate 2</button>
Die Funktion kann auch beliebig erweitert werden, in dem man z.B. mit einer if-Bedingung abfragt, ob der Button überhaupt „disabled“ ist oder nicht. Je nach Zustand wird dieser dann entweder aktiviert, deaktiviert oder es passiert nichts.
LG medmonk
Grundsätzlich sieht das gar nicht so falsch aus, was du da gemacht hast. Du musst jedoch auf ein paar Dinge aufpassen.
Mit folgendem Code sollte es funktionieren:
function Test() {
let button = document.getElementById('button');
button.disabled = false;
}
Erklärung: die Funktion heißt getElementById (beachte die Groß- & Kleinschreibung)
Wenn du "let" zur Definition von Variablen benutzt musst du darauf achten dass diese nur innerhalb eines Blocks verfügbar sind. Kurz gesagt wenn du das außerhalb der Funktion definierst, ist es innerhalb der Funktion nicht verfügbar. Also entweder die Definition auch in die Funktion packen oder stattdessen "var" verwenden.
Für solche Dinge nutze ich immer jQuery.
Falls du das nicht kennst: Das ist ein JavaScript-Framework, das ein paar Funktionen vereinfacht. Unter anderem sowas. Natürlich ist das auch ohne Framework möglich, was du tun willst. Aber vielleicht nutzt du jQuery ja schon oder hast Lust, die Möglichkeiten zu entdecken.
Das wäre jedenfalls der Code, um dein Problem zu lösen: https://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/
Dem ist nicht so. In einer Funktion kann auf außen definierte Variablen (global scope) zugegriffen werden, während Variablen, die innerhalb einer Funktion definiert wurden, auch nur in dieser verfügbar sind (block scope).
In JavaScript sollte man das Keyword var möglichst gar nicht mehr verwenden, da jenes recht fehleranfällig ist (Stichwort: Scoping). Stattdessen je nach Anwendungsfall mit let und const arbeiten. let immer dann, wenn sich der Wert ändern kann und darf, const hingegen, wenn dies nicht der Fall ist oder nicht der Fall sein sollte.
Der verlinkte Artikel ist zwar schon etwas älter, dort wird es aber nochmal etwas ausführlicher an einzelnen Beispielen erläutert. Falls also Interesse besteht, einfach mal durchlesen und die Code-Beispiele anschauen.
LG medmonk