javascript menekan butang yang berbeza dan kotak teks memaparkan perkataan dengan warna yang berbeza

Dengan perkembangan teknologi Internet, JavaScript telah menjadi bahasa pengaturcaraan yang sangat diperlukan dalam pembangunan laman web. Kelebihan JavaScript ialah ia boleh dijalankan dalam penyemak imbas, dan ia juga boleh digunakan dengan HTML dan CSS untuk mencapai kesan halaman web yang dinamik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk memaparkan perkataan dengan warna yang berbeza dalam kotak teks apabila butang berbeza ditekan.

Idea Pelaksanaan

Sebelum mencapai matlamat ini, kita perlu memahami beberapa pengetahuan asas JavaScript. JavaScript terutamanya menggunakan DOM (Document Object Model) untuk mencapai kesan dinamik pada halaman web. DOM menghuraikan halaman web ke dalam satu siri nod dan objek yang boleh dimanipulasi melalui JavaScript. Berikut ialah pengetahuan JavaScript yang diperlukan untuk pelaksanaan ini:

1. Dapatkan elemen halaman: Gunakan JavaScript untuk mendapatkan elemen dalam halaman mengikut ID atau nama kelas. Sebagai contoh, kita boleh mendapatkan ID elemen melalui kaedah document.getElementById(), atau dapatkan nama kelas sekumpulan elemen melalui kaedah document.getElementsByClassName().
2. Mendengar acara: JavaScript boleh menambah pendengar acara untuk melakukan tindakan yang sepadan apabila peristiwa halaman web berlaku. Sebagai contoh, kita boleh menggunakan kaedah .addEventListener() untuk mendengar klik tetikus, penekanan papan kekunci, pergerakan tetikus dan acara lain.
3. Ubah suai atribut elemen: JavaScript boleh mencapai kesan dinamik pada halaman web dengan mengubah suai atribut elemen. Sebagai contoh, kita boleh mengubah suai warna fon elemen melalui atribut .style.color dan mengubah suai kandungan teks elemen melalui atribut .innerHTML.

Sekarang kita mempunyai pengetahuan asas di atas, kita boleh mula melaksanakan fungsi memaparkan perkataan warna yang berbeza dalam kotak teks apabila butang yang berbeza ditekan. Langkah-langkah khusus adalah seperti berikut:

1. Buat kotak teks dan tiga butang (butang merah, butang kuning, butang hijau).
2. Gunakan JavaScript untuk mendapatkan elemen kotak teks dan tiga butang.
3. Tambahkan pendengar acara klik untuk tiga butang Apabila pengguna mengklik butang, fungsi yang sepadan dicetuskan.
4. Dalam fungsi yang sepadan, ubah suai gaya kotak teks untuk memaparkan perkataan dengan warna yang sepadan.
5. Akhir sekali, uji sama ada fungsi itu normal.

Kod pelaksanaan

Berikut ialah kod JavaScript untuk memaparkan perkataan berlainan warna dalam kotak teks apabila butang berbeza ditekan:

// 获取文本框和三个按钮的元素
var text_box = document.getElementById("text-box");
var red_button = document.getElementById("red-button");
var yellow_button = document.getElementById("yellow-button");
var green_button = document.getElementById("green-button");

// 添加三个按钮的点击事件监听器
red_button.addEventListener("click", function() {
    // 将文本框的样式修改为红色
    text_box.style.color = "red";
});

yellow_button.addEventListener("click", function() {
    // 将文本框的样式修改为黄色
    text_box.style.color = "yellow";
});

green_button.addEventListener("click", function() {
    // 将文本框的样式修改为绿色
    text_box.style.color = "green";
});

Perlu diingatkan bahawa , apabila melaksanakan kod, anda perlu mendapatkan elemen kotak teks dan tiga butang dengan betul, jika tidak, kod tidak akan berfungsi dengan betul.

Ringkasan

Artikel ini memperkenalkan cara menggunakan JavaScript untuk memaparkan perkataan dengan warna yang berbeza dalam kotak teks apabila butang berbeza ditekan. Antaranya, kami melaksanakan fungsi ini melalui pengetahuan asas JavaScript (mendapatkan elemen halaman, mendengar acara dan mengubah suai atribut elemen).

Kami berharap melalui artikel ini, kami dapat membantu pemula lebih memahami cara menggunakan JavaScript, dan kami juga berharap semua orang dapat memperdalam pemahaman mereka tentang JavaScript melalui latihan.

Atas ialah kandungan terperinci javascript menekan butang yang berbeza dan kotak teks memaparkan perkataan dengan warna yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!