Study Case Menampilkan Detail Hero Javascript

Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya kali ini, masih seputar javascript dan masih berhubungan dengan tutorial saya sebelumnya, yang bisa teman-teman lihat dan ikuti stepnya di link berikut ini: klik disini.

pada kasli ini kita akan membuatÂ Study Case Menampilkan Detail Hero Javascript Â

Kemarin pada tutorial sebelumnya kita telah belajar menampilkan data array pada select option seta memfilternya sesuai dengan nilai yang kita pilih pada select option tersebut, yang hasilnya teman-teman bisa lihat seperti iniÂ

Sekarang kita akan buat kasusnya ketika kita klik salah satu list heronya kita akan mendapatkan detail hero yang tampil sebelumnya, saya merubah nilai variable hero yang kita punya yang sebelumnya adalah data array, saya rubah menjadi data array object seperti berikut ini :

let dataHero = [
	{id: 1, name : 'Aludard', type: 'Fighter', desc : 'desktop PageMaker including versions of Lorem Ipsum'}, 
        {id: 2, name : 'Alice', type : 'Mage', desc : 'Various versions have evolved over the years, sometimes'}, 
	{id: 3, name : 'Akai', type : 'Tank', desc : 'evolved over the years, sometimes'}, 
	{id: 4, name : 'Tigreal', type: 'Tank', desc : 'There are many variations of passages of'},
	{id: 5, name : 'Miya', type : 'Marksman', desc : 'There are many '}, 
	{id: 6, name : 'Claude', type: 'Marksman', desc : 'or randomised words which don'}, 
	{id: 7, name : 'Estes', type: 'Mage', desc : 'Richard McClintock, a Latin professor at Hampden-Sydney '}, 
	{id: 8, name : 'Chow', type : 'Fighter', desc : 'professor at Hampden-Sydney '}, 
	{id: 9, name : 'Balmond', type : 'Fighter', desc : 'many web sites still in their infancy. Various'}, 
	{id: 10, name : 'Lyla', type : 'Marksman', desc : 'maninfancy. Various'}
]

Jdi untuk menampilkan pada fungsi loadnya adalah seperti ini :

function load(nilai){
			for(i=0; i< nilai; i++){
				result.innerHTML += "<li class='list-group-item listDetail' data-id="+dataHero[i].id+">"+dataHero[i].name+"</li>"
			}
		}

Sekarang kita akan buat fungsi untuk menampilkan detailnya ketika di klik salah satu heronya, silahakan teman -teman tambahkan script seperti berikut ini:

function detail(){
			let listDetail = document.getElementsByClassName('listDetail')
			let detail = document.getElementById('detail')
			for(i = 0; i < listDetail.length; i++){
				listDetail[i].addEventListener('click', function(){
					let x = this.getAttribute('data-id')
					detail.innerHTML = "<h3>Detail Hero</h3>\
					<div class='alert alert-success'>\
					<p>Hero Name : <span class='badge badge-info'>"+dataHero[x-1].name+"</span></p>\
					<p>Type Hero : <span class='badge badge-info'>"+dataHero[x-1].type+"</span></p>\
					<p>About Hero : <span class='badge badge-info'>"+dataHero[x-1].desc+"</span></p>\
					</div>"
				})
			}
		}

Dimana fungsi detail akan kita jalankan saat selectnya di change seperti beikut ini:

select.addEventListener('change', function(){
			let nilai = select.value
			result.innerHTML = ""
			load(nilai)
			detail()
		})

Jika Sudah silahakan teman-teman jalankan pada browser dan lihat hasilnya, hasilnya akan seperti berikut ini:

NOTE : HARUS SUDAH MEMPRAKTEKAN TUTORIAL SEBELUMNYA DI LINK DIATAS.

Oke tema-teman untuk tutorial kali ini cukup sampai sini dulu semoga bermanfaat,

terima kasih

Study Case Menampilkan Detail Hero Javascript

Kategori