Cara Mengelompokan Bilangan Ganjil dan Genap dengan Javascript -

Mungkin untuk untuk tutorial mengetahui bilangan genap dan ganji sudah bertebaran disana ya, lalu apa yang membedakan dari yang lain, yang membedakan disini adalah kita akan memasukan sebuah angka dimana ketika angka itu di masukan angka tersebut masuk golongan genap atau ganjil seperti, maka dari itu bagaimana cara mengelompokan bilangan ganjil dan genap dengan javascript, simak terus ya teman-teman.

Untuk mengklompokan bilangan ganjil dan genap tidak hanya menggunakan javascript ya teman-teman tetapi bisa juga dengan Bahasa pemrograman lain, sama saja alurnya, dan oke untuk kasus kali ini cara mengelompokan bilangan ganjil dan genap dengan javascript, teman-teman siapkan CDN CSS bootstrap ya, seperti biasa supaya tampilan kita lebih rapih, oke langsung saja kodenya seperti ini:

<div class="container">
	<div class="row">
		<div class="offset-md-3">
			<form>
				<div class="form-group">
				    <label>Masukan bilangan</label>
				    <input type="number" class="form-control" id="insertData">
				 </div>
				 <button type="submit" class="btn btn-success" id="btnData">insert</button>
			</form>
		</div>
		<div class="col-md-4">
			<div class="alert alert-success" role="alert">
			  Bilangan Keseluruhan: <span id="allData"></span>
			</div>
			<div class="alert alert-primary" role="alert">
			  Genap: <span id="genap"></span>
			</div>
			<div class="alert alert-danger" role="alert">
			  Ganjil: <span id="ganjil"></span>
			</div>
		</div>
	</div>
</div>

<form>

<label>Masukan bilangan</label>

</div>

<button type="submit" class="btn btn-success" id="btnData">insert</button>

</form>

</div>

Bilangan Keseluruhan: <span id="allData"></span>

</div>

Genap: <span id="genap"></span>

</div>

Ganjil: <span id="ganjil"></span>

</div>

Ini adalah sebuah templatenya ya teman-teman, dimana saya menyiapkan satu inputan dan sebuah button, dan di kolom selanjutnya ada sebuah output untuk melihat apakah sudah benar sesuai pengklompokannya, selanjutnya scriptnya seperti ini:

var allData = document.getElementById("allData");
var btnData = document.getElementById("btnData");
var printGenap = document.getElementById("genap");
var printGanjil = document.getElementById("ganjil");
var insertData = document.getElementById("insertData");
var data = []

var allData = document.getElementById("allData");

var btnData = document.getElementById("btnData");

var printGenap = document.getElementById("genap");

var printGanjil = document.getElementById("ganjil");

var insertData = document.getElementById("insertData");

var data = []

Saya buat dulu sebuah variabelnya untuk setiap idnya, dan ada array kosong disitu itu adalah untuk menampung semua data angka yang masuk, nanti angka keselurhan itu kita akan klompokan, selanjutnya, ketika button di klik kodenya seperti ini:

btnData.addEventListener("click", function(e){
	e.preventDefault()
	
	var valueInsert = insertData.value
	data.push(valueInsert)
	insertData.value = ""
	console.log(data)
	allData.innerHTML = data

	var genap = []
	var ganjil = []

	for(var i = 0; i<data.length; i++){
	if(data[i] % 2 == 0){
		genap.push(data[i])
	}else{
		ganjil.push(data[i])
	}
}
	printGenap.innerHTML = genap
	printGanjil.innerHTML = ganjil
})

btnData.addEventListener("click", function(e){

e.preventDefault()

var valueInsert = insertData.value

data.push(valueInsert)

insertData.value = ""

console.log(data)

allData.innerHTML = data

var genap = []

var ganjil = []

for(var i = 0; i<data.length; i++){

if(data[i] % 2 == 0){

genap.push(data[i])

}else{

ganjil.push(data[i])

}

printGenap.innerHTML = genap

printGanjil.innerHTML = ganjil

})

Disini saya menggunakanÂ sebuah even click dan saya menggunakan preventdefault untuk memberhentikan fungsi sementara dari sebuah form, lalu seperti yang teman-teman liat valu dari sebuah input itu saya masukan ke data array yang kosong di atas, kenapa harus di atas, yak arena jika kita letakan di even click, nilai tidak akan bertambah, dan bisa dilihat juga ada data array kosong genap dan ganjil ya, itu untuk memfilter angka mana yang genap dan ganjil, dan untuk mengecek genap atau tidak, disini saya gunakan modulus 2 jika hasil baginya 0 maka itu ganjil, seperti itu ya, dan kurang lebih seperti ini hasilnya:

Lumayan rapih ya, bisa dilihat bilangan keseluruhan ada di atas, dan bilangan genap ganjil sudah di kelompokan di bawahnya, oke saya rasa cukup sampai disini pelajaran kita tentang cara mengelompokan bilangan ganjil dan genap dengan javascript semoga bermanfaat sampai jumpa pada artikel berikutnya terimakasih.

Cara Mengelompokan Bilangan Ganjil dan Genap dengan Javascript

Facebook DUMET School

Categories