JavaScript Schaltflächentext ändern

1. JavaScript Schaltflächentext beim Laden ändern
2. JavaScript Schaltflächentext bei Mouseover ändern
3. JavaScript Schaltflächentext beim Klicken ändern
4. JavaScript Schaltflächentext mit jQuery ändern

Unser Ziel ist es, anhand von Beispielcodes etwas über den Text der JavaScript-Schaltfläche zu lernen. Es zeigt, wie sich der Schaltflächentext beim Laden, Klicken und Mouseover ändert. Es veranschaulicht auch die Verwendung von jQuery, um den Schaltflächentext zu ändern.

JavaScript Schaltflächentext beim Laden ändern

Wenn Sie ein HTML-Element <input> wie input[type='button'] oder input[type='submit'] haben, können Sie den Schaltflächentext folgendermaßen ändern.

HTML Quelltext:

<input id="btn" type="button" value="Update">
<input id="btnSubmit" type="submit" value="Update">

JavaScript-Code:

document.querySelector('#btn').value = 'Remove';
document.querySelector('#btnSubmit').value = 'Remove';

Sie können auch den Schaltflächentext des HTML-Elements <button> ändern, indem Sie eine der unten angegebenen Methoden verwenden (vorgegebene Methoden sind .innerHTML, .innerText und .textContent).

HTML Quelltext:

<button id="btn" type="button" value="Show Result">Show Result</button>
<button id="btnSubmit" type="submit" value="Submit Result">Submit Result</button>

JavaScript-Code:

// querySelector selects the element whose id's value is btn
document.querySelector('#btn').innerHTML = 'Hide Result';
document.querySelector('#btn').innerText = 'Hide Result';
document.querySelector('#btn').textContent = 'Hide Result';

// querySelector selects the element whose id's value is btnSubmit
document.querySelector('#btnSubmit').innerHTML = 'Hide Result';
document.querySelector('#btnSubmit').innerText = 'Hide Result';
document.querySelector('#btnSubmit').textContent = 'Hide Result';

Können wir .innerHTML, .innerText und .textContent für das HTML-Element <input> verwenden? Nein. Der Grund ist, dass <input> ein leeres Element ist, während <button> ein Container-Tag ist und die Eigenschaften .innerHTML, .innerText und .textContent hat.

Obwohl das Ziel durch die Verwendung von .innerHTML, .innerText und .textContent erreicht wird, müssen Sie einige Punkte im Auge behalten.

1. Aufgrund der Verwendung von JavaScript .innerHTML müssen Sie möglicherweise Site-übergreifenden Sicherheitsangriffen ausgesetzt sein.
2. JavaScript .innerText reduziert die Performance, da es Angaben zum Layoutsystem benötigt.
3. JavaScript .textContent wirft keine Sicherheitsbedenken auf wie .innerHTML. Es muss auch nicht den HTML-Inhalt wie .innerText parsen, was zu der besten Leistung führt.

Jetzt kennen Sie die Unterschiede zwischen ihnen. Wählen Sie also eine dieser Methoden, die Ihren Projektanforderungen entspricht. Sie können hier mehr darüber lesen.

JavaScript Schaltflächentext bei Mouseover ändern

HTML Quelltext:

<button class="button">Hide Result</button>

CSS-Code:

.button {
 background-color: red;
}
.button:hover {
 background-color: green;
}

JavaScript-Code:

let btn = document.querySelector('.button');

btn.addEventListener('mouseover', function() {
  this.textContent = 'Show Result!';
})
btn.addEventListener('mouseout', function() {
  this.textContent = 'Hide Result';
})

Der obige Code sollte eine Ausgabe zeigen, in der sich der Text und die Farbe der Schaltfläche ändern, wenn Sie mit dem Mauszeiger auf die Schaltfläche zeigen.

Der querySelector() gibt das erste Element aus, das mit dem definierten Selektor übereinstimmt. Der addEventListener() hängt einen Event-Handler an das angegebene Element an und richtet eine Methode zum Auslösen eines bestimmten Ereignisses ein.

Wir verwenden mouseover- und mouseout-Events, und .textContent ändert den Button-Text.

JavaScript Schaltflächentext beim Klicken ändern

HTML Quelltext:

<input onclick="changeText()" type="button" value="Hide Result" id="btn">

JavaScript-Code:

function changeText() {
  let element = document.getElementById('btn');
  if (element.value == 'Hide Result')
    element.value = 'Show Result';
  else
    element.value = 'Hide Result';
}

changeText() wird ausgeführt, wenn Sie auf die Schaltfläche klicken. Diese Methode holt das erste Element, das mit dem angegebenen Selektor übereinstimmt, mit getElementById(). Dann überprüft es den Wert des Elements und ändert sich entsprechend der if-else-Anweisung.

JavaScript Schaltflächentext mit jQuery ändern

HTML Quelltext:

<!DOCTYPE>
<html>
 <head>
 	<title>Change Text</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 	<button id="button" onclick="changeText()">Hide Result</button>
 </body>
</html>

JavaScript-Code:

function changeText() {
  $('#button').html('Show Result');
  $('#button').css('background-color', 'green');
}

Der obige Code ändert den Text der Schaltfläche von Hide Result in Show Result, wenn Sie auf die Schaltfläche klicken, und ändert auch die Farbe der Schaltfläche in Grün.

Die .html() setzt den Inhalt des ausgewählten Elements, während .css() die background-color auf grün ändert. Denken Sie daran, dass .html() für das HTML-Element <button> verwendet wird.

Weitere Einzelheiten zu diesen Funktionen finden Sie unter diesem Link.

Sie denken vielleicht darüber nach, wie wir den Text mit jQuery ändern können, wenn wir das HTML-Element <input> haben? Der folgende Code ist für Sie zu verstehen.

HTML Quelltext:

<!DOCTYPE>
<html>
 <head>
 	<title>Change Text</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 	<input type="button" id="btnShow" value="Show" onclick="changeText()">
 </body>
</html>

JavaScript-Code:

function changeText() {
  $('#btnShow').attr('value', 'Hide');  // versions older than 1.6
  $('#btnShow').prop('value', 'Hide');  // versions newer than 1.6
  $('#btnShow').css('background-color', 'yellow');
}

Sie können .attr() oder prop() (je nach jQuery-Version) verwenden, um den Schaltflächentext des HTML-Elements <input> zu ändern. Sowohl .attr() als auch .prop() zielen auf das value-Attribut des <input>-Elements ab und ändern seinen Wert entsprechend dem zweiten Parameter.

In diesem Beispielcode ist der zweite Parameter Hide. Die Methode changeText() ändert auch die Hintergrundfarbe mithilfe der Funktion .css() auf Gelb.