Heim > Artikel > Web-Frontend > Wie ändere ich Text und Bilder durch Klicken auf eine Schaltfläche in JavaScript?

Wie ändere ich Text und Bilder durch Klicken auf eine Schaltfläche in JavaScript?

王林nach vorne: 2023-09-07 14:25:021131Durchsuche

如何通过单击 JavaScript 中的按钮来更改文本和图像？

Sie können den einem bestimmten Element zugewiesenen Text und das im img-Element angegebene Bild ganz einfach mithilfe von JavaScript ändern. Wir können das onclick-Ereignis mit dem Button-Element im HTML-Dokument verwenden, sodass dies geschieht, wenn auf die Schaltfläche geklickt wird. Um den Text einer Schaltfläche beim Klicken zu ändern, weisen wir dem Ereignis onclick eine Funktion als Wert zu, der die erforderlichen Änderungen durchführt.

Lassen Sie uns anhand von Codebeispielen mehr darüber erfahren, wie Sie Text und Bilder mithilfe von JavaScript separat ändern können.

Ändern Sie den Text eines Elements

JavaScript stellt uns zwei verschiedene Eigenschaften zur Verfügung, um den Text eines Elements in einem HTML-Dokument zu ändern oder abzurufen. Diese beiden Eigenschaften sind zusammen mit ihrer Funktionalität und Syntax unten aufgeführt -

innerText – Die innerText-Eigenschaft von JavaScript wird verwendet, um den vorherigen Text zu ändern oder den vorherigen Text eines bestimmten ausgewählten Elements aus dem HTML-Dokument abzurufen.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie die innerText-Eigenschaft verwenden, um den Text eines Elements abzurufen und zu ändern -

selected_element.innerText = " new text ";

innerHTML Das Attribut -innerHTML stellt nicht nur den Text des Elements und aller darin verwendeten Untertags bereit, sondern ändert auch den Text des Elements und seiner darin verwendeten Untertags in neuen Text.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie das innerHTML-Attribut verwenden, um den Text eines Elements abzurufen oder zu ändern -

selected_element.innerHTML = " new text ";

Lassen Sie uns diese beiden Eigenschaften durch praktische Implementierung in Codebeispielen verstehen -

Algorithmus

Schritt 1 - Im ersten Schritt fügen wir das Eingabeelement zum HTML-Dokument hinzu. Auf diese Weise können wir den Text des folgenden Absatzes durch vom Benutzer eingegebenen Text ändern.
Schritt 2 – In diesem Schritt fügen wir eine Schaltflächenbezeichnung mit einem damit verbundenen Onclick-Ereignis hinzu, das eine Funktion als Wert annimmt und diese aufruft, wenn der Benutzer auf die Schaltfläche klickt und den Text des Absatzes ändert.
Schritt 3 – Im nächsten Schritt definieren wir eine JavaScript-Funktion, in der wir den vom Benutzer eingegebenen Eingabetext erfassen und die Eigenschaften innerText und innerHTML verwenden, um den Text unter dem Absatz auf der Seite zu ändern.

Beispiel

Das folgende Beispiel erklärt Ihnen, wie Sie die Attribute innerText und innerHTML verwenden, um den Text eines Elements zu ändern -

<html lang = "en">
<body>
   <h2>Changing an Text of an element in the HTML document using JavaScript.</h2>
   <p id = "upper">The text of the below element will be replaced by the text you enter in input bar once you click the button.</p>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeImage()"> Click to change the Text </button>
   <p id = "para1">This is the initial text of Para1.</p>
   <p id = "para2">This is the initial text of Para2.</p>
   <script>
      var para1 = document.getElementById("para1");
      var para2 = document.getElementById("para2");
      function changeImage() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         para1.innerText = enteredText + ", This text is changed using the innerText property. ";
         para2.innerHTML = " <u> " + enteredText + " </u> " + ", <b> This text is changed using the <em> innerHTML </em> property. <b> <br> ";
      }
   </script>
</body>
</html>

Im obigen Beispiel haben wir den Text von zwei verschiedenen Absätzen mithilfe der Eigenschaften innerText und innerHTML geändert. Der Text des vorherigen wird mithilfe der innerText-Eigenschaft geändert. Gleichzeitig wird der Text des letztgenannten Textes mithilfe des innerHTML-Attributs geändert.

Bild beim Klicken auf die Schaltfläche ändern

Wir haben besprochen, wie man mit JavaScript den Text eines Elements in einem HTML-Dokument ändert. Nein, wir werden darüber sprechen, wie man mithilfe von JavaScript ein Bild ändert, indem man einfach auf eine Schaltfläche klickt.

JavaScript ermöglicht es uns, das Attribut src zu verwenden, um den Wert eines bestimmten Links oder die Bildadresse eines img-Elements in einem bestimmten src-Attribut zu ändern und abzurufen.

Grammatik

Die folgende Syntax zeigt, wie das Attribut src zum Ändern von Bildern auf einer Webseite verwendet wird -

selected_img_element.src = " new link or address ";

Lassen Sie uns nun die praktische Implementierung der Bildänderung mit dem src-Attribut anhand eines JavaScript-Codebeispiels verstehen -

Algorithmus

Schritt 1 – Im ersten Schritt fügen wir dem HTML-Dokument ein img-Element hinzu, dessen src-Attribut einen Anfangswert enthält, den wir später mithilfe von JavaScript mithilfe des src-Attributs ändern werden.
Schritt 2 – Im nächsten Schritt fügen wir ein Schaltflächenelement mit einem Onclick-Ereignis hinzu, das eine Funktion aufruft, wenn auf die Schaltfläche geklickt wird.
Schritt 3 – In diesem Schritt definieren wir eine JavaScript-Funktion und rufen das darin enthaltene img-Element anhand seiner ID ab.
Schritt 4 – Im letzten Schritt verwenden wir das src-Attribut, um den Wert des src-Attributs zu ändern und ihm einen neuen Wert zuzuweisen, um einige neue Bilder auf der Webseite anzuzeigen. Bei jedem Klick auf die Schaltfläche wechselt der Benutzer mit jedem Klick zwischen den beiden Bildern.

Beispiel

Das folgende Beispiel erklärt, wie das src-Attribut durch einen neuen Wert ersetzt werden kann, indem der vorherige Wert des src-Attributs und das vorherige Bild auf der Webseite ersetzt werden -

<html>
<body>
   <h2>Changing an Image in the HTML document using JavaScript</h2>
   <p id = "upper">The image shown below will be changed once you click the button.</p>
   <img src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU" id = "image"> <br> <br>
   <button id = "btn" onclick = "changeImage()"> Click to change the Image </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      function changeImage() {
         var image = document.getElementById("image");
         if (image.src ==           "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU") {
            image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU";
            result.innerHTML += " The image is changed from <b> Light mode to Dark mode </b>. <br> ";
         }
         else {
            image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU";
            result.innerHTML += " The image is changed from <b> Dark mode to Light mode </b>. ";
         }
         upper.innerHTML = " The previous image is replaced by the new image as you click the button. <br> ";
      }
   </script>
</body>
</html>

Im obigen Beispiel verwenden wir das src-Attribut, um den src-Attributwert des img-Elements und des tatsächlichen Bildes auf der Webseite zu ändern.

In diesem Artikel haben wir uns zwei verschiedene Möglichkeiten, den Text eines Elements auf einer Webseite mithilfe von JavaScript zu ändern, und wie man ein Bild auf einer Webseite ändert, mit Codebeispielen für jede davon genauer angesehen. Mithilfe dieser Beispiele können Sie Ihre praktischen JavaScript-Kenntnisse erweitern.

Das obige ist der detaillierte Inhalt vonWie ändere ich Text und Bilder durch Klicken auf eine Schaltfläche in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 事件 innerHTML 算法

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie deaktiviere ich die Zurück-Schaltfläche Ihres Browsers mit JavaScript?Nächster Artikel：Wie deaktiviere ich die Zurück-Schaltfläche Ihres Browsers mit JavaScript?

In Verbindung stehende Artikel

Mehr sehen