Mencari Ralat dalam Kod DOM JavaScript

Dalam tugasan berikutnya, seorang pengaturcara telah menulis kod dan mungkin melakukan kesilapan di dalamnya. Anda perlu menyemak sama ada kod tersebut melakukan seperti yang diterangkan. Jika kod tidak berfungsi dengan betul, anda perlu membetulkan kesilapan tersebut.

Kod sepatutnya menambah teks pada penghujung setiap perenggan:

<p>1</p>
<p>2</p>
<p>3</p>

let elems = document.querySelector('p');
elems.textContent += '!';

Apabila diklik pada perenggan, nilainya sepatutnya bertambah satu:

<p>1</p>
<p>2</p>
<p>3</p>

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.textContent += Number(1);
	});
}

Apabila diklik pada butang, teks perenggan sepatutnya menjadi tebal:

<p>teks</p>
<button>klik</button>

let button = document.querySelector('button');
let elem   = document.querySelector('p');

button.addEventListener('click', function() {
	elem.innerHTML = '<b>elem.innerHTML</b>';
});

Apabila diklik pada butang, sepatutnya dipaparkan jumlah nombor dari perenggan:

<p>1</p>
<p>2</p>
<p>3</p>

<button>klik</button>

let button = document.querySelector('button');
let elems  = document.querySelector('p');

button.addEventListener('click', function() {
	let sum = 0;
	
	for (let elem of elems) {
		sum += Number(elems.textContent);
	}
	
	console.log(sum);
});

Apabila diklik pada perenggan, teks yang ditentukan sepatutnya ditambah pada penghujungnya:

<p>1</p>
<p>2</p>
<p>3</p>

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', () => {
		this.textContent += '!';
	});
}

Apabila diklik pada butang, teks setiap perenggan sepatutnya menjadi tebal:

<p>teks1</p>
<p>teks2</p>
<p>teks3</p>
<button>klik</button>

let button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

button.addEventListener('click', function() {
	for (let elem of elems) {
		elem.innerHTML = '<b>+elem.innerHTML+</b>';
	}
});

Apabila diklik pada butang, jumlah nombor dari perenggan sepatutnya dipaparkan dalam konsol:

<p>1</p>
<p>2</p>
<p>3</p>

<button>klik</button>

let button = document.querySelector('button');
let elems  = document.querySelectorAll('p');
let sum = 0;

for (let elem of elems) {
	sum = elem.textContent + 1;
	
	button.addEventListener('click', function() {
		console.log(sum);
	});
}

Nombor dimasukkan ke dalam input. Apabila diklik pada butang, jumlah nombor dari input sepatutnya dipaparkan dalam konsol:

<input>
<input>
<input>

<button>klik</button>

let button = document.querySelector('button');
let elems  = document.querySelectorAll('input');
let sum = 0;

for (let elem of elems) {
	sum += elem.value;
}

button.addEventListener('click', function() {
	console.log(sum);
});

Nombor dimasukkan ke dalam dua input pertama. Apabila diklik pada butang, jumlah nombor tersebut sepatutnya dipaparkan dalam input ketiga:

<input id="inp1">
<input id="inp2">
<input id="inp3">

<button id="btn">klik</button>

let btn  = document.querySelector('#btn');
let inp1 = document.querySelector('#inp1');
let inp2 = document.querySelector('#inp2');
let inp3 = document.querySelector('#inp3');

btn.addEventListener('click', function() {
	inp3.textContent = inp1.textContent + inp2.textContent;
});

Nombor dimasukkan ke dalam dua input pertama. Apabila diklik pada butang, jumlah nombor tersebut sepatutnya dipaparkan dalam perenggan:

<input id="inp1">
<input id="inp2">
<p id="res"></p>

<button id="btn">klik</button>

let btn  = document.querySelector('btn');
let res  = document.querySelector('res');
let inp1 = document.querySelector('inp1');
let inp2 = document.querySelector('inp2');

button.addEventListener('click', function() {
	res.value = inp1.value + inp2.value;
});

Apabila diklik pada butang, perlu disemak, sama ada teks dalam setiap input sepadan dengan teks atribut data-nya:

<input data-text="text1">
<input data-text="text2">
<input data-text="text3">

<button id="btn">klik</button>

let inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')

button.addEventListener('click',function() {
	for (let input of inputs) {
		if (input.value === input.dataset) {
			input.classList.add('right')
		} else {
			input.classList.add('wrong')
		}
	}
});

Apabila diklik pada butang, perlu disemak, sama ada teks dalam setiap input sepadan dengan teks elemen array yang sepadan:

<input>
<input>
<input>

<button id="btn">klik</button>

let inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')

let texts = [
	'text1',
	'text2',
	'text3',
];

button.addEventListener('click',function() {
	for (let input of inputs) {
		for (let text of texts) {
			if (input.value === text) {
				input.classList.add('right')
			} else {
				input.classList.add('wrong')
			}
		}
	}
});

Nombor dimasukkan ke dalam input. Apabila diklik pada butang, jumlah nombor yang dimasukkan sepatutnya dipaparkan dalam konsol:

<input>
<input>
<input>

<button id="btn">klik</button>

let inputs = document.querySelectorAll('inputs');
let btn = document.querySelector('#btm');
let sum = 0;

btn.addEventListener('click', function() {
	for (let input of inputs) {
		sum += Number(input);
	}
	
	console.log(sum);
});

Nombor dimasukkan ke dalam dua input pertama. Apabila diklik pada butang, jumlah nombor tersebut sepatutnya dipaparkan dalam input ketiga:

<input id="inp1">
<input id="inp2">
<input id="inp3">

<button id="btn">klik</button>

let btn  = document.querySelector('#btn');
let inp1 = document.querySelector('#inp1');
let inp2 = document.querySelector('#inp2');
let inp3 = document.querySelector('#inp3');

let sum  = inp1.value + inp2.value;

btn.addEventListener('click', function() {
	inp3.value = sum;
});

Nombor dimasukkan ke dalam input. Apabila kehilangan fokus, jumlah digit nombor tersebut sepatutnya dipaparkan dalam konsol:

<input id="inp">

let inp = document.querySelector('#inp').value;

inp.addEventListener('blur', function() {
	let digits = +inp.split('');
	let sum = 0;
	
	for (let digit of digits) {
		sum += digit;
	}
	
	console.log(sum);
});