Button Add Text Javascript

3 min read Jun 24, 2024

Menambahkan Teks dengan Tombol Menggunakan JavaScript

Artikel ini akan membahas cara menambahkan teks ke dalam elemen HTML menggunakan tombol dan JavaScript.

Dasar-dasar JavaScript

JavaScript merupakan bahasa pemrograman yang digunakan untuk menambahkan interaktivitas ke dalam halaman web. Dalam konteks ini, kita akan menggunakan JavaScript untuk menangani kejadian "klik" pada tombol dan memanipulasi konten elemen HTML.

Struktur HTML

Pertama, kita perlu menyiapkan struktur HTML dasar yang terdiri dari:

Tombol: Elemen <button> yang akan memicu penambahan teks.
Elemen target: Elemen HTML tempat teks akan ditambahkan. Ini bisa berupa <p>, <div>, atau elemen lainnya.

Berikut contoh kode HTML:




    Menambahkan Teks

Kode JavaScript

Selanjutnya, kita akan menulis kode JavaScript di file script.js untuk menangani logika penambahan teks.

const addTextBtn = document.getElementById('addTextBtn');
const targetText = document.getElementById('targetText');

addTextBtn.addEventListener('click', () => {
    // Teks yang ingin ditambahkan
    const newText = "Teks baru ditambahkan!"; 

    // Menambahkan teks ke elemen target
    targetText.textContent += newText;
});

Kode JavaScript di atas melakukan hal berikut:

Mendapatkan referensi ke tombol dan elemen target menggunakan document.getElementById().
Menambahkan event listener "click" pada tombol.
Ketika tombol diklik, fungsi anonim akan dijalankan.
Fungsi tersebut mengambil teks yang akan ditambahkan.
textContent digunakan untuk menambahkan teks baru ke konten elemen target.

Menjalankan Kode

Simpan kode HTML dan JavaScript di file terpisah. Kemudian, buka file HTML di browser. Ketika Anda mengklik tombol "Tambahkan Teks", teks baru akan ditambahkan ke dalam paragraf.

Kesimpulan

Artikel ini telah menjelaskan bagaimana menambahkan teks ke dalam elemen HTML menggunakan tombol dan JavaScript. Dengan menggunakan event listener dan manipulasi DOM, Anda dapat dengan mudah membuat interaksi yang dinamis pada halaman web Anda.