DOM менен JavaScriptтеги коддо каталарды издөө

Төмөнкү маселелерде белгилүү бир программист код жазган жана, мүмкүн, анда каталар жасан. Сиз текшеришиңиз керек, код сипатталганды аткарабы же жокпу. Эгер код туура эмес иштесе, сиз каталарды оңдошуңуз керек.

Код ар бир абзацтын аягына текст кошууга тийиш:

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

let elems = document.querySelector('p');
elems.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(1);
	});
}

Баскычты чыкылдаганда абзацтын тексти жуан болушу керек:

<p>текст</p>
<button>чыкылда</button>

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

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

Баскычты чыкылдаганда абзацтардагы сандардын суммасы чыгышы керек:

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

<button>чыкылда</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);
});

Абзацты чыкылдаганда ага берилген текст кошулушу керек:

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

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

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

Баскычты чыкылдаганда ар бир абзацтын тексти жуан болушу керек:

<p>текст1</p>
<p>текст2</p>
<p>текст3</p>
<button>чыкылда</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>';
	}
});

Баскычты чыкылдаганда консолго абзацтардагы сандардын суммасы чыгышы керек:

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

<button>чыкылда</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);
	});
}

Инпуттарга сандар киргизилет. Баскычты чыкылдаганда консолго инпуттардагы сандардын суммасы чыгышы керек:

<input>
<input>
<input>

<button>чыкылда</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);
});

Биринчи эки инпутка сандар киргизилет. Баскычты чыкылдаганда үчүнчү инпутка ушул сандардын суммасы чыгышы керек:

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

<button id="btn">чыкылда</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;
});

Биринчи эки инпутка сандар киргизилет. Баскычты чыкылдаганда абзацка ушул сандардын суммасы чыгышы керек:

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

<button id="btn">чыкылда</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;
});

Баскычты чыкылдаганда текшерилиши керек, ар бир инпуттагы текст анын data атрибутунун текстине дал келеби:

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

<button id="btn">чыкылда</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')
		}
	}
});

Баскычты чыкылдаганда текшерилиши керек, ар бир инпуттагы текст массивдин тиешелүү элементинин текстине дал келеби:

<input>
<input>
<input>

<button id="btn">чыкылда</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')
			}
		}
	}
});

Инпуттарга сандар киргизилет. Баскычты чыкылдаганда консолго киргизилген сандардын суммасы чыгышы керек:

<input>
<input>
<input>

<button id="btn">чыкылда</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);
});

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

<button id="btn">чыкылда</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;
});

Инпутка сан киргизилет. Фокус жоготкондо консолго ушул сандын цифраларынын суммасы чыгышы керек:

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