Maison > Article > interface Web > Comment modifier le texte et les images en cliquant sur un bouton en JavaScript ?

Comment modifier le texte et les images en cliquant sur un bouton en JavaScript ?

王林avant: 2023-09-07 14:25:021187parcourir

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

Vous pouvez facilement modifier le texte attribué à un élément spécifique et l'image spécifiée dans l'élément img à l'aide de JavaScript. Nous pouvons utiliser l'événement onclick avec l'élément bouton dans le document HTML pour que cela se produise lorsque l'on clique sur le bouton. Pour modifier le texte d'un bouton lors d'un clic, nous attribuons une fonction à l'événement onclick comme valeur qui effectue les modifications requises.

Apprenons-en davantage sur la façon de modifier le texte et les images séparément à l'aide de JavaScript à travers des exemples de code.

Changer le texte d'un élément

JavaScript nous fournit deux propriétés différentes pour modifier ou obtenir le texte d'un élément dans un document HTML, ces deux propriétés ainsi que leurs fonctionnalités et leur syntaxe sont répertoriées ci-dessous -

innerText - La propriété innerText de JavaScript est utilisée pour modifier le texte précédent ou obtenir le texte précédent d'un élément spécifique sélectionné à partir du document HTML.

Grammaire

La syntaxe suivante vous montrera comment utiliser la propriété innerText pour obtenir et modifier le texte d'un élément -

selected_element.innerText = " new text ";

innerHTML L'attribut -innerHTML fournit non seulement le texte de l'élément et toutes ses sous-balises utilisées à l'intérieur, mais modifie également le texte de l'élément et ses sous-balises utilisées à l'intérieur en nouveau texte.

Grammaire

La syntaxe suivante vous montrera comment utiliser l'attribut innerHTML pour obtenir ou modifier le texte d'un élément -

selected_element.innerHTML = " new text ";

Comprenons ces deux propriétés à travers une mise en œuvre pratique dans des exemples de code -

Algorithme

Étape 1 - Dans la première étape, nous ajoutons l'élément d'entrée au document HTML. De cette façon, nous pouvons modifier le texte du paragraphe suivant avec le texte saisi par l'utilisateur.
Étape 2 - Dans cette étape, nous ajouterons une étiquette de bouton avec un événement onclick associé qui prendra une fonction comme valeur et l'appellera lorsque l'utilisateur clique sur le bouton et modifie le texte du paragraphe.
Étape 3 - Dans l'étape suivante, nous définirons une fonction JavaScript dans laquelle nous récupérerons le texte d'entrée saisi par l'utilisateur et utiliserons les propriétés innerText et innerHTML pour modifier le texte sous le paragraphe de la page.

Exemple

L'exemple ci-dessous vous expliquera comment utiliser les attributs innerText et innerHTML pour modifier le texte d'un élément -

<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>

Dans l'exemple ci-dessus, nous avons modifié le texte de deux paragraphes différents en utilisant les propriétés innerText et innerHTML. Le texte du précédent est modifié à l'aide de la propriété innerText. Dans le même temps, le texte de ce dernier texte est modifié à l'aide de l'attribut innerHTML.

Changer l'image en cliquant sur le bouton

Nous avons expliqué comment utiliser JavaScript pour modifier le texte d'un élément dans un document HTML. Non, nous allons parler de la façon de modifier une image en cliquant simplement sur un bouton à l'aide de JavaScript.

JavaScript nous permet d'utiliser l'attribut src pour modifier ainsi que d'obtenir la valeur d'un lien donné ou l'adresse image d'un élément img dans un attribut src donné.

Grammaire

La syntaxe suivante montrera comment utiliser l'attribut src pour modifier les images sur une page Web -

selected_img_element.src = " new link or address ";

Comprenons maintenant la mise en œuvre pratique de la modification d'une image avec l'attribut src à l'aide de l'exemple de code JavaScript -

Algorithme

Étape 1 - Dans la première étape, nous ajouterons un élément img dans le document HTML dont l'attribut src contient une valeur initiale, que nous modifierons plus tard en utilisant JavaScript à l'aide de l'attribut src.
Étape 2 - Dans l'étape suivante, nous ajouterons un élément bouton avec un événement onclick qui appellera une fonction lorsque le bouton est cliqué.
Étape 3 - Dans cette étape, nous définirons une fonction JavaScript et obtiendrons l'élément img qu'elle contient par son identifiant.
Étape 4 - Dans la dernière étape, nous utiliserons l'attribut src pour modifier la valeur de l'attribut src et lui attribuer une nouvelle valeur pour afficher de nouvelles images sur la page Web. Chaque fois que vous cliquez sur le bouton, l'utilisateur basculera entre les deux images à chaque clic.

Exemple

L'exemple ci-dessous expliquera comment l'attribut src peut être remplacé par une nouvelle valeur en remplaçant la valeur précédente de l'attribut src et l'image précédente sur la page Web -

<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>

Dans l'exemple ci-dessus, nous utilisons l'attribut src pour modifier la valeur de l'attribut src de l'élément img et l'image réelle sur la page Web.

Dans cet article, nous avons examiné de plus près deux manières différentes de modifier le texte d'un élément sur une page Web à l'aide de JavaScript et comment modifier une image sur une page Web avec des exemples de code pour chacune d'elles. Ces exemples vous aideront à améliorer vos connaissances pratiques de JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 事件 innerHTML 算法

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment désactiver le bouton retour de votre navigateur en utilisant JavaScript ?Article suivant：Comment désactiver le bouton retour de votre navigateur en utilisant JavaScript ?

Articles Liés

Voir plus