JavaScript Dapat Mengubah HTML Konten
Salah satu dari banyak metode HTML adalah getElementById ().
Contoh ini menggunakan metode untuk "menemukan" elemen HTML menggunakan id="", dan mengubah isi elemen (innerHTML)
Contoh
<!DOCTYPE html>
<html>
<body>
<h1>Contoh JavaScript</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hayyyyyyyy!'">
Click Me!</button>
</body>
</html>
JavaScript Dapat Mengubah Atribut HTML
Contoh:
<!DOCTYPE html>
<html>
<body>
<h1>Contoh JavaScript gambar</h1>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
JavaScript Dapat Mengubah Gaya HTML (CSS)
Mengubah gaya elemen HTML, adalah varian dari mengubah atribut HTML:
Contoh:
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
JavaScript Bisa Validasi data
JavaScript sering digunakan untuk memvalidasi input:
Contoh:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
................................................Selesai......................................
REFERENSI :
W3schools.com
Wikipedia.com
Tidak ada komentar:
Posting Komentar
Berikan Komentar, yang baik akan di balas dengan baik Pula.
Komentarmu Cerminan Hidupmu.