Cara Membuat Text Tebal Menggunakan Javascript

Seperti yang sebelumnya saya sudah membahas tentang javascript lainnya dan kali ini tidak jauh berbeda dengan yang sebelumnya. Namun disini kita akan membuat event agar text/paragraph menjadi tebal (bold) ketika tombol di klik.

Jika teman-teman ingin melihat atau membaca artikelÂ yang sebelumnya tentang javascript silahkan klik dibawah ini :

oke untuk teman-teman yang sudah membacanya silahkan kita mulai praktek untuk pembahasan sekarang tentang Cara Membuat Text Tebal Menggunakan Javascript.

pertama-tama jalankan/run text-editor yang teman-teman gunakan. Kemudian ketiklah/copy script HTML dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>TEXT TEBAL JAVASCRIPT</title>
</head>
<body>
	<p id="efek">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	<button onclick="tebal()">TEBAL</button>
</body>
</html>

Jika sudah simpan dengan format .html, lalu kemudian tambahkan script javascript seperti dibawah ini :

<script>
	function tebal(){
		document.getElementById("efek").style.fontWeight = "bold";
	}
</script>

Letakan kode javascript tsb diantara tag head. Atau untuk lebih jelasnya hasil dari 2 kode diatas menjadi seperti dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>TEXT TEBAL JAVASCRIPT</title>
	<script>
		function tebal(){
			document.getElementById("efek").style.fontWeight = "bold";
		}
	</script>
</head>
<body>
	<p id="efek">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	<button onclick="tebal()">TEBAL</button>
</body>
</html>

Kode diatas cara bacanya tidak jauh berbeda dengan pembahasan selanjutnya hanya saja perbedaan style css nya saja. Oke lanjut teman-teman simpan, dan silahkan dicoba dijalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan seperti pada gambar dibawah ini :

Sebelum di klik

Sesudah di klik

Bagaimana teman-teman cukup mudah bukan ? menarik bukan javascript ini. Dan untuk tugas teman-teman silahkan gabungkan ketiga materi ini tentang javascript. jadi contohnya ada 3 button untuk menebalkan,memiringkan,mewarnai text. dan jika sudah selesai langsung kirim saja ke mrizalh.dumet@gmail.com

Oke kalau begitu sekian pembahasan kali ini tentang Cara Membuat Text Tebal Menggunakan Javascript. semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Cara Membuat Text Tebal Menggunakan Javascript

Kategori