Tìm lỗi trong mã với DOM trong JavaScript

Trong các nhiệm vụ sau, một lập trình viên đã viết mã và có thể đã mắc lỗi. Bạn phải kiểm tra xem mã có thực hiện đúng mô tả không. Nếu mã hoạt động không chính xác, bạn phải sửa lỗi.

Mã phải thêm văn bản vào cuối mỗi đoạn văn:

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

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

Khi nhấp vào đoạn văn, giá trị của nó phải tăng lên một:

<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);
	});
}

Khi nhấp vào nút, văn bản của đoạn văn phải trở thành đậm:

<p>text</p>
<button>click</button>

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

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

Khi nhấp vào nút, tổng các số từ các đoạn văn phải được hiển thị:

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

<button>click</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);
});

Khi nhấp vào đoạn văn, văn bản đã cho phải được thêm vào cuối nó:

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

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

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

Khi nhấp vào nút, văn bản của mỗi đoạn văn phải trở thành đậm:

<p>text1</p>
<p>text2</p>
<p>text3</p>
<button>click</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>';
	}
});

Khi nhấp vào nút, tổng các số từ các đoạn văn phải được hiển thị trong console:

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

<button>click</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);
	});
}

Các số được nhập vào các ô input. Khi nhấp vào nút tổng các số từ các ô input phải được hiển thị trong console:

<input>
<input>
<input>

<button>click</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);
});

Các số được nhập vào hai ô input đầu tiên. Khi nhấp vào nút, tổng của các số này phải được hiển thị trong ô input thứ ba:

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

<button id="btn">click</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;
});

Các số được nhập vào hai ô input đầu tiên. Khi nhấp vào nút, tổng của các số này phải được hiển thị trong đoạn văn:

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

<button id="btn">click</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;
});

Khi nhấp vào nút, cần kiểm tra xem văn bản trong mỗi ô input có khớp với văn bản của thuộc tính data của nó không:

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

<button id="btn">click</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')
		}
	}
});

Khi nhấp vào nút, cần kiểm tra xem văn bản trong mỗi ô input có khớp với văn bản của phần tử tương ứng trong mảng không:

<input>
<input>
<input>

<button id="btn">click</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')
			}
		}
	}
});

Các số được nhập vào các ô input. Khi nhấp vào nút, tổng các số đã nhập phải được hiển thị trong console:

<input>
<input>
<input>

<button id="btn">click</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);
});

Các số được nhập vào hai ô input đầu tiên. Khi nhấp vào nút, tổng của các số này phải được hiển thị trong ô input thứ ba:

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

<button id="btn">click</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;
});

Một số được nhập vào ô input. Khi mất focus, tổng các chữ số của số này phải được hiển thị trong console:

<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);
});