Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
menempatkan code javascript di antara tag <head>
mau tanya tadinya saya mau menempatkan script di antara tag <head> menggunakan anonymus function terus saya tambahkan event onclick untuk merubah isi dari tag p tapi setelah saya click tidak terjadi apa-apa. apa mungkin ada yang salah dari script saya ini mohon bantuannya terima kasih!
<!DOCTYPE html>
<html lang="en">
<head>
<title>web</title>
<script>
window.onload=function(){
function rubah1(){
document.getElementById("text1").innerHTML="SUDAH BERUBAH TEXT 1";
}
}
</script>
</head>
<body>
<p id="text1">Teks 1 Sebelum Di Rubah</p>
<button type="button" onclick="rubah1();">Rubah Text 1</button>
</body>
</html>
1 Jawaban:
Jawaban Terpilih
logikanya gini gan, window.onload itu, fungsi didalamnya baru dikerjakan setelah semua yang ada di body itu selesai di load. Nah sekarang agan memasang event listener pada Tag button yang akan fire fungsi rubah1()
<button type="button" onclick="rubah1();">Rubah Text 1</button>
Nah pada saat, itu window belum selesai di"load", yang artinya fungsi ini
function(){
function rubah1(){
document.getElementById("text1").innerHTML="SUDAH BERUBAH TEXT 1";
}
}
belum ada. fungsi diatas baru akan difire(dikerjakan) ketika window sudah selesai load. Nah, jadinya fungsi rubah1() itu belum terdefinisi ketika dipanggil diatas.
cara benerinnya ada 2 cara, 1. gausah pake window.onload , langsung aja di head define fungsinya
<script>
function rubah1(){
document.getElementById("text1").innerHTML="SUDAH BERUBAH TEXT 1";
}
</script>
atau 2. tambahkan event listener di dalam fungsi window.onload
<html lang="en">
<head>
<title>web</title>
<script>
window.onload=function(){
function rubah1(){
document.getElementById("text1").innerHTML="SUDAH BERUBAH TEXT 1";
}
document.getElementById("button1").addEventListener("click", function(){
rubah1();
});
}
</script>
</head>
<body>
<p id="text1">Teks 1 Sebelum Di Rubah</p>
<button id="button1" type="button">Rubah Text 1</button>
</body>
</html>
bisa dilihat disini : '>https://jsfiddle.net/xer6jn2a/2/
