Bagaimana Anda membuat teks muncul di javascript?

Sumber

  
    
    THURSDAY
    
  

Sumber

Sunny mornings

Sumber

Great Thinkers

Sumber

  Ready
  Set
  Go!

Sumber

  
    
    Signal
    &
    Noise
    
  

Sumber

  
    Beautiful Questions
  

Sumber

  
    Reality is broken
  

Sumber

  
    Hi
    !
  
  
  
  

Sumber

  
    Coffee mornings
  

Sumber

  
    Domino Dreams
  

Sumber

Sunny mornings

Sumber

Sunny mornings

Sumber

Sunny mornings

Sumber

Sunny mornings

Sumber

Sunny mornings

Sumber

Sunny mornings

Salah satu cara JavaScript yang umum digunakan adalah menyembunyikan atau menampilkan konten berdasarkan perilaku pengguna. Misalnya, pengguna dapat memilih opsi saat mengisi formulir online, dan pilihan mereka dapat menyebabkan bidang formulir terkait lainnya muncul. Dalam pelajaran ini, Anda akan menggunakan CSS dan Javascript untuk menampilkan dan menyembunyikan jam yang telah Anda buat

Hasil Pelajar

Pada penyelesaian latihan ini

• Anda akan dapat menggunakan CSS untuk menyembunyikan dan menampilkan konten
• Anda akan dapat menggunakan JavaScript untuk mengubah dan properti CSS elemen HTML

Kegiatan

Merupakan praktik umum di web saat ini untuk menyembunyikan konten dari pengguna sampai diperlukan. Dalam pelajaran ini, Anda akan menyembunyikan jam Anda, lalu menambahkan link yang jika diklik akan menampilkan jam

Buka javascript. html di editor teks dan browser web Anda. Buka style sheet yang Anda buat untuk div#clock di pelajaran sebelumnya. Tambahkan properti berikut ke style sheet

Sekarang segarkan halaman Anda di browser Anda. Apa yang terjadi? . Ini adalah salah satu dari beberapa cara untuk menyembunyikan konten menggunakan CSS. Untuk membuat elemen terlihat lagi, Anda akan mengubah properti ini menjadi

Namun, dalam hal ini kami ingin membuat elemen terlihat hanya jika pengguna secara khusus memintanya. Jadi kita harus mengubah gaya secara dinamis, menggunakan JavaScript, yang dipicu oleh peristiwa onclick

Pertama, tambahkan elemen yang Anda ingin pengguna klik

Tampilkan jam

Perhatikan bahwa tombol ini pada dasarnya sama dengan tombol yang Anda buat di Pelajaran 1 untuk menampilkan peringatan. Namun ada satu perbedaan penting. Tombol ini memiliki atribut id. Itu agar Anda dapat mengaksesnya dengan mudah menggunakan JavaScript (Anda akan tahu alasannya sebentar lagi)

Sekarang Anda memiliki tombol yang, ketika diklik, memanggil fungsi toggleClock(), Anda perlu membuat fungsi toggleClock(). Inilah fungsinya - tambahkan saja ke bagian skrip yang ada di kepala halaman web Anda

  function toggleClock() {
    // get the clock
    var myClock = document.getElementById('clock');

    // get the current value of the clock's display property
    var displaySetting = myClock.style.display;

    // also get the clock button, so we can change what it says
    var clockButton = document.getElementById('clockButton');

    // now toggle the clock and the button text, depending on current state
    if (displaySetting == 'block') {
      // clock is visible. hide it
      myClock.style.display = 'none';
      // change button text
      clockButton.innerHTML = 'Show clock';
    }
    else {
      // clock is hidden. show it
      myClock.style.display = 'block';
      // change button text
      clockButton.innerHTML = 'Hide clock';
    }
  }

Dalam fungsi toggleClock() baru ini, Anda menggunakan JavaScript untuk mengambil elemen jam, mendapatkan nilai gaya tampilan saat ini, lalu memeriksanya. Jika tampilan saat ini disetel ke "blokir", jam akan terlihat, jadi Anda mengubah tampilan menjadi "tidak ada", yang menyembunyikan jam. Jika jam sudah disembunyikan, Anda mengubah tampilan menjadi "blok" agar terlihat lagi. Saat Anda mengganti tampilan jam bolak-balik dari "blok" ke "tidak ada", Anda juga mengubah teks (innerHTML) pada tombol jam, sehingga bergantian antara "Tampilkan jam" dan "Sembunyikan jam", tergantung

Semua selesai?

Uji halaman web Anda, dan pastikan Anda dapat menampilkan dan menyembunyikan jam dengan tombol baru. Pastikan juga teks tombol berubah dari "Tampilkan jam" menjadi "Sembunyikan jam" sebagaimana mestinya. Bagikan halaman web Anda dengan instruktur Anda. Jika semuanya baik-baik saja, lanjutkan ke pelajaran berikutnya

Bagaimana cara menampilkan input dalam JavaScript?

Bagaimana cara mencetak teks di layar dalam JavaScript?

Bagaimana cara menampilkan nama dalam JavaScript?

Apa itu teks () dalam JavaScript?