Tutorial Merubah Content Textfield, Textarea dan elemen HTML dengan Javascript
August 11, 2011
|
Posted by admin
Catatan saya kali ini adalah merubah konten textfield, text area dan elemen HTML dengan javascript dan ternyata cukup mudah
Misalnya saja anda mempunyai sebuah elemen html
<div id="thumbnail">ini teks</div>
Kemudian anda ingin merubah ini teks menjadi teks lain ketika anda meng-klik sebuah button, maka caranya seperti ini
buatlah fungsi seperti ini
<script languange="javascript">
function ganti_text(){
document.getElementById('thumbnail').innerHTML = "ini teks yang baru";
}
</script>
dan pada button anda pastikan anda menggunakan event onClick sehingga seperti ini
<input type="button" name="bt_ganti_text" id="bt_ganti_text" value="ganti_text" onClick="ganti_text();">
sebagai contoh berikut ini adalah contoh lengkap script merubah content textfield, text area dan elemen html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ganti Text</title>
<script language="javascript">
function ganti_text(){
document.getElementById('thumbnail').innerHTML = "ini teks yang baru";
}
function ganti_textfield(){
document.getElementById('textfield').value = "ini teks yang baru";
}
function ganti_textarea(){
document.getElementById('textarea').value = "ini teks yang baru";
}
</script>
</head>
<body>
<input type="button" name="bt_ganti_text" id="bt_ganti_text" value="ganti_text" onClick="ganti_text();">
<div id="thumbnail">ini teks sekarang</div>
<p>
<input type="button" name="bt_ganti_text" id="bt_ganti_text" value="ganti_textfield" onClick="ganti_textfield();">
<input name="textfield" type="text" id="textfield" value="ini text sekarang" size="60" />
</p>
<p>
<input type="button" name="bt_ganti_text" id="bt_ganti_text" value="ganti_textarea" onClick="ganti_textarea();">
<textarea name="textarea" cols="60" id="textarea">ini text sekarang</textarea>
</p>
</body>
</html>
yah demikian info singkat merubah content textfield, textarea dan elemen html
Categories: Coding, javascript
| 
Tags: tutorial javascript
|
Leave a reply
klo di jquery malah lebih mudah kan….
cukup :
$(‘#thumbnail’).val(‘Text baru’);
$(‘#textfield’).val(‘ini teks yang baru’);