DOM ilə JavaScript kodunda səhvlərin axtarışı

Aşağıdakı tapşırıqlarda müəyyən proqramçı kod yazmışdır və ola bilsin ki, orada səhvlərə yol vermişdir. Siz yoxlamalısınız ki, kod təsvir olunanı edirmi? Əgər kod düzgün işləmirsə, siz səhvləri düzəltməlisiniz.

Kod hər bir abzasın sonuna mətn əlavə etməlidir:

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

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

Abzasa klik edildikdə onun dəyəri bir vahid artmalıdır:

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

Düyməyə klik edildikdə abzasın mətni qalın olmalıdır:

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

Düyməyə klik edildikdə abzaslardakı rəqəmlərin cəmi çap edilməlidir:

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

Abzasa klik edildikdə ona sonunda müəyyən edilmiş mətn əlavə edilməlidir:

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

Düyməyə klik edildikdə hər bir abzasın mətni qalın olmalıdır:

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

Düyməyə klik edildikdə konsola abzaslardakı rəqəmlərin cəmi çap edilməlidir:

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

Inputlara rəqəmlər daxil edilir. Düyməyə klik edildikdə konsola inputlardakı rəqəmlərin cəmi çap edilməlidir:

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

İlk iki inputa rəqəmlər daxil edilir. Düyməyə klik edildikdə üçüncü inputa bu rəqəmlərin cəmi çap edilməlidir:

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

İlk iki inputa rəqəmlər daxil edilir. Düyməyə klik edildikdə abzasa bu rəqəmlərin cəmi çap edilməlidir:

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

Düyməyə klik edildikdə yoxlanılmalıdır ki, hər bir inputdakı mətn onun data atributu ilə üst-üstə düşürmü:

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

Düyməyə klik edildikdə yoxlanılmalıdır ki, hər bir inputdakı mətn massivin müvafiq elementi ilə üst-üstə düşürmü:

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

Inputlara rəqəmlər daxil edilir. Düyməyə klik edildikdə konsola daxil edilmiş rəqəmlərin cəmi çap edilməlidir:

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

İlk iki inputa rəqəmlər daxil edilir. Düyməyə klik edildikdə üçüncü inputa bu rəqəmlərin cəmi çap edilməlidir:

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

Inputa rəqəm daxil edilir. Fokus itirildikdə konsola bu rəqəmin rəqəmlərinin cəmi çap edilməlidir:

<input id="inp">

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

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