DOM арқылы JavaScript кодындағы қателерді іздеу

Келесі тапсырмаларда белгілі бір бағдарламашы код жазған және ол кодта қателер жіберген болуы мүмкін. Сіз кодтың сипатталған нәрсені жасайтынын тексеруіңіз керек. Егер код дұрыс жұмыс істемесе, сіз қателерді түзетуіңіз керек.

Код әрбір абзацтың соңына мәтін қосуы керек:

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

let elems = document.querySelectorAll('p');
for (let elem of elems) {
	elem.textContent += '!';
}

Абзацқа басқанда оның мәні бірлікке өсуі керек:

<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(this.textContent) + 1;
	});
}

Түймешені басқанда абзац мәтіні қалың болуы керек:

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

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

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

Түймешені басқанда абзацтардағы сандардың қосындысы шығуы керек:

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

<button>click</button>

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

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

Абзацқа басқанда оның соңына берілген мәтін қосылуы керек:

<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 += '!';
	});
}

Түймешені басқанда әрбір абзацтың мәтіні қалың болуы керек:

<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.textContent + '</b>';
	}
});

Түймешені басқанда консольге абзацтардағы сандардың қосындысы шығуы керек:

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

<button>click</button>

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

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

Енгізу жолдарына сандар енгізіледі. Түймешені басқанда консольге енгізу жолдарынан алынған сандардың қосындысы шығуы керек:

<input>
<input>
<input>

<button>click</button>

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

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

Алғашқы екі енгізу жолына сандар енгізіледі. Түймешені басқанда үшінші енгізу жолына осы сандардың қосындысы шығуы керек:

<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.value = Number(inp1.value) + Number(inp2.value);
});

Алғашқы екі енгізу жолына сандар енгізіледі. Түймешені басқанда абзацқа осы сандардың қосындысы шығуы керек:

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

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

Түймешені басқанда әрбір енгізу жолындағы мәтіннің оның data атрибутының мәтінімен сәйкес келетінін тексеру керек:

<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('#btn')

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

Түймешені басқанда әрбір енгізу жолындағы мәтіннің массивтің сәйкес элементінің мәтінімен сәйкес келетінін тексеру керек:

<input>
<input>
<input>

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

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

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

button.addEventListener('click',function() {
	for (let i = 0; i < inputs.length; i++) {
		if (inputs[i].value === texts[i]) {
			inputs[i].classList.add('right')
		} else {
			inputs[i].classList.add('wrong')
		}
	}
});

Енгізу жолдарына сандар енгізіледі. Түймешені басқанда консольге енгізілген сандардың қосындысы шығуы керек:

<input>
<input>
<input>

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

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

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

<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.value = Number(inp1.value) + Number(inp2.value);
});

Енгізу жолына сан енгізіледі. Фокус жоғалтқан кезде консольге осы санның цифрларының қосындысы шығуы керек:

<input id="inp">

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

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