EL Creative Academy Site of The Month
Pengenalan Lebih Lanjut Tentang JavaScript

Salah satu dari metode JavaScript yang sering digunakan adalah getElementById(). Berikut adalah contoh yang menggunakan metode tersebut untuk mencari sebuah elemen dari HTML yang memiliki id="contoh" dan mengubah isi dari elemen (innerHTML) menjadi "Halo JavaScript".

<!DOCTYPE html>
<html>
    <body>      
        <p id="demo">JavaScript dapat mengubah konten dari elemen HTML.</p>

        <button type="button" onclick="document.getElementById('demo').innerHTML = 'Halo JavaScript!'">Klik Tombol Ini</button>
    </body>
</html>

Output
JavaScript dapat mengubah konten dari elemen HTML.

Jika kita perhatikan, disana saya menggunakan tanda petik satu pada kode document.getElementById('demo').innerHTML = 'Halo JavaScript!' karena saya mengawali pembukaan value pada atribut dengan tanda petik dua. Selain itu, kita juga dapat menggunakan tanda petik dua jika kita mengawali pembukaan value dari atribut dengan tanda petik satu seperti contoh berikut:

<!DOCTYPE html>
<html>
    <body>
        <p id="demo">JavaScript dapat mengubah konten dari elemen HTML.</p>

        <button type="button" onclick='document.getElementById("demo").innerHTML = "Halo JavaScript!"'>Klik Tombol Ini</button>
    </body>
</html>

Output

JavaScript dapat mengubah konten dari elemen HTML.




Mengubah Nilai dari Atribut HTML dengan JavaScript

Pada contoh di bawah ini, kita juga dapat mengubah nilai dari atribut src (source) dari tag <img> pada HTML:

<!DOCTYPE html>
<html>
    <body>       
        <p>Dalam hal ini, JavaScript akan mengubah nilai dari atribut src (source) dari tag <img>.</p>

        <button onclick="document.getElementById('gambarKu').src='https://1.bp.blogspot.com/-95vxTMUNRVk/XX0qUc8mQFI/AAAAAAAAGio/HoryuUsgDtgzfTyIKL7NNzFJJbvMfdd7QCPcBGAYYCw/s1600/JavaScript.jpg'">Gambar JavaScript</button>

        <img id="gambarKu" src="https://1.bp.blogspot.com/-95vxTMUNRVk/XX0qUc8mQFI/AAAAAAAAGio/HoryuUsgDtgzfTyIKL7NNzFJJbvMfdd7QCPcBGAYYCw/s1600/JavaScript.jpg" style="width:100px">

        <button onclick="document.getElementById('gambarKu').src='https://1.bp.blogspot.com/-RIXF_vDsPns/XXNlLo2pG3I/AAAAAAAAGgw/8VOfyFtcIhcwRBAPepnbyQgQdyLIjleLwCPcBGAYYCw/s1600/HTML.jpg'">Gambar HTML</button>
    </body>
</html>

Output

JavaScript dapat mengubah nilai dari atribut HTML.

Dalam hal ini, JavaScript akan mengubah nilai dari atribut src (source) dari tag <img>.


Mengubah Style HTML pada CSS dengan JavaScript

Mengubah Style dari elemen HTML sama saja seperti mengubah atribut pada HTML. Perhatikanlah contoh berikut:

<!DOCTYPE html>
<html>
    <body>
        <p id="demo">JavaScript dapat mengubah Style dari elemen HTML.</p>

        <button type="button" onclick="document.getElementById('demo').style.fontSize='30px'">Klik Tombol Ini</button>
    </body>
</html>

Output

JavaScript dapat mengubah Style dari elemen HTML.


Menampilkan Elemen HTML dengan JavaScript

Menampilkan elemen HTML yang disembunyikan (display: none) juga dapat diselesaikan dengan menggunakan JavaScript. Perhatikanlah contoh berikut:

<!DOCTYPE html>
<html>
    <body>
        <p>JavaScript dapat menampikan elemen HTML yang tersembunyi.</p>

        <p id="demosss" style="display:none">Halo JavaScript</p>

        <button type="button" onclick="document.getElementById('demo').style.display='block'">Klik Tombol Ini</button>
    </body>
</html>

Output

JavaScript dapat menampikan elemen HTML yang tersembunyi.

0 Komentar