DOM bilan JavaScript kodida xatolarni topish

Quyidagi vazifalarda ma'lum bir dasturchi kod yozgan va unda xatolar qilgan bo'lishi mumkin. Siz tekshirishingiz kerak, kod tavsiflangan ishni bajaradimi yoki yo'q. Agar kod noto'g'ri ishlasa, siz xatolarni tuzatishingiz kerak.

Kod har bir abzas oxiriga matn qo'shishi kerak:

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

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

Abzas ustiga bosilganda uning qiymati bittaga oshirilishi kerak:

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

Tugma ustiga bosilganda abzas matni qalin shriftga o'zgartirilishi kerak:

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

Tugma ustiga bosilganda abzatlardagi sonlar yig'indisi chiqishi kerak:

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

Abzas ustiga bosilganda uning oxiriga berilgan matn qo'shilishi kerak:

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

Tugma ustiga bosilganda har bir abzas matni qalin shriftga o'zgartirilishi kerak:

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

Tugma ustiga bosilganda konsolga abzatlardagi sonlar yig'indisi chiqishi kerak:

<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 += Number(elem.textContent);
}

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

Inputlarga sonlar kiritiladi. Tugma ustiga bosilganda konsolga inputlardagi sonlar yig'indisi chiqishi kerak:

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

Dastlabki ikkita inputga sonlar kiritiladi. Tugma ustiga bosilganda uchinchi inputga bu sonlar yig'indisi chiqishi kerak:

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

Dastlabki ikkita inputga sonlar kiritiladi. Tugma ustiga bosilganda abzasga bu sonlar yig'indisi chiqishi kerak:

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

Tugma ustiga bosilganda tekshirish kerak, har bir inputdagi matn uning data atributi matniga mos keladimi yoki yo'q:

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

Tugma ustiga bosilganda tekshirish kerak, har bir inputdagi matn massivning mos keladigan elementi matniga mos keladimi yoki yo'q:

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

Inputlarga sonlar kiritiladi. Tugma ustiga bosilganda konsolga kiritilgan sonlar yig'indisi chiqishi kerak:

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

Dastlabki ikkita inputga sonlar kiritiladi. Tugma ustiga bosilganda uchinchi inputga bu sonlar yig'indisi chiqishi kerak:

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

Inputga son kiritiladi. Fokus yo'qotilganda konsolga shu son raqamlari yig'indisi chiqishi kerak:

<input id="inp">

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

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