Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar teks dan imej dengan mengklik butang dalam JavaScript?

Bagaimana untuk menukar teks dan imej dengan mengklik butang dalam JavaScript?

王林ke hadapan: 2023-09-07 14:25:021131semak imbas

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

Anda boleh menukar teks yang diberikan dengan mudah kepada elemen tertentu dan imej yang dinyatakan dalam elemen img menggunakan JavaScript. Kita boleh menggunakan acara onclick dengan elemen butang dalam dokumen HTML supaya ini berlaku apabila butang diklik. Untuk menukar teks butang pada klik, kami menetapkan fungsi kepada acara onclick sebagai nilai yang melakukan perubahan yang diperlukan.

Mari ketahui lebih lanjut tentang cara menukar teks dan imej secara berasingan menggunakan JavaScript melalui contoh kod.

Tukar teks unsur

JavaScript memberikan kita dua sifat berbeza untuk menukar atau mendapatkan teks elemen dalam dokumen HTML, kedua-dua sifat ini bersama-sama dengan fungsi dan sintaksnya disenaraikan di bawah -

innerText - Sifat innerText JavaScript digunakan untuk menukar teks sebelumnya atau mendapatkan teks sebelumnya bagi elemen terpilih tertentu daripada dokumen HTML.

Tatabahasa

Sintaks berikut akan menunjukkan kepada anda cara menggunakan sifat innerText untuk mendapatkan dan menukar teks elemen -

selected_element.innerText = " new text ";

innerHTML Atribut -innerHTML bukan sahaja menyediakan teks elemen dan semua subtegnya yang digunakan di dalamnya, tetapi juga menukar teks elemen dan subtegnya yang digunakan di dalamnya kepada teks baharu.

Tatabahasa

Sintaks berikut akan menunjukkan kepada anda cara menggunakan atribut innerHTML untuk mendapatkan atau menukar teks elemen -

selected_element.innerHTML = " new text ";

Mari kita memahami kedua-dua sifat ini melalui pelaksanaan praktikal dalam contoh kod -

Algoritma

Langkah 1 - Dalam langkah pertama, kami menambah elemen input pada dokumen HTML. Dengan cara ini kita boleh menukar teks perenggan berikut dengan teks yang dimasukkan oleh pengguna.
Langkah 2 - Dalam langkah ini kami akan menambah label butang dengan acara onclick yang dikaitkan dengannya yang akan mengambil fungsi sebagai nilainya dan memanggilnya apabila pengguna mengklik butang dan menukar teks perenggan itu.
Langkah 3 - Dalam langkah seterusnya, kami akan mentakrifkan fungsi JavaScript di mana kami akan mengambil teks input yang dimasukkan oleh pengguna dan menggunakan sifat innerText dan innerHTML untuk menukar teks di bawah perenggan pada halaman.

Contoh

Contoh di bawah akan menerangkan kepada anda cara menggunakan atribut innerText dan innerHTML untuk menukar teks elemen -

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

Dalam contoh di atas, kami menukar teks dua perenggan berbeza menggunakan sifat innerText dan innerHTML. Teks yang sebelumnya ditukar menggunakan sifat innerText. Pada masa yang sama, teks teks terakhir ditukar menggunakan atribut innerHTML.

Tukar imej pada butang klik

Kami telah membincangkan cara menggunakan JavaScript untuk menukar teks elemen dalam dokumen HTML. Tidak, kita akan bercakap tentang cara menukar imej hanya dengan mengklik butang menggunakan JavaScript.

JavaScript membolehkan kami menggunakan atribut src untuk menukar serta mendapatkan nilai pautan yang diberikan atau alamat imej elemen img dalam atribut src yang diberikan.

Tatabahasa

Sintaks berikut akan menunjukkan cara menggunakan atribut src untuk menukar imej pada halaman web -

selected_img_element.src = " new link or address ";

Sekarang mari kita fahami pelaksanaan praktikal menukar imej dengan atribut src dengan bantuan contoh kod JavaScript -

Algoritma

Langkah 1 - Dalam langkah pertama, kami akan menambah elemen img dalam dokumen HTML yang atribut srcnya mengandungi beberapa nilai awal, yang kemudiannya akan kami ubah menggunakan JavaScript dengan bantuan atribut src.
Langkah 2 - Dalam langkah seterusnya, kami akan menambah elemen butang dengan acara onclick yang akan memanggil fungsi apabila butang diklik.
Langkah 3 - Dalam langkah ini, kami akan mentakrifkan fungsi JavaScript dan mendapatkan elemen img di dalamnya dengan idnya.
Langkah 4 - Dalam langkah terakhir, kami akan menggunakan atribut src untuk menukar nilai atribut src dan memberikannya nilai baharu untuk memaparkan beberapa imej baharu pada halaman web. Setiap kali butang diklik, pengguna akan bertukar antara dua imej dengan setiap klik.

Contoh

Contoh di bawah akan menerangkan bagaimana atribut src boleh digantikan dengan nilai baharu dengan menggantikan nilai sebelumnya bagi atribut src dan imej sebelumnya pada halaman 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>

Dalam contoh di atas, kami menggunakan atribut src untuk menukar nilai atribut src bagi elemen img dan imej sebenar pada halaman web.

Dalam artikel ini, kami melihat dengan lebih dekat dua cara berbeza untuk menukar teks elemen pada halaman web menggunakan JavaScript dan cara menukar imej pada halaman web dengan contoh kod untuk setiap satu daripadanya. Contoh-contoh ini akan membantu anda meningkatkan pengetahuan praktikal anda tentang JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk menukar teks dan imej dengan mengklik butang dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 事件 innerHTML 算法

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk melumpuhkan butang belakang penyemak imbas anda menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk melumpuhkan butang belakang penyemak imbas anda menggunakan JavaScript?

Artikel berkaitan

Lihat lagi