Klaidų paieška DOM kode su JavaScript

Šiose užduotyse tam tikras programuotojas parašė kodą ir galbūt padarė jame klaidų. Jūs turite patikrinti, ar kodas daro tai, kas aprašyta. Jei kodas veikia neteisingai, turite ištaisyti klaidas.

Kodas turi pridėti tekstą į kiekvienos pastraipos pabaigą:

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

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

Paspaudus ant pastraipos, jos reikšmė turi padidėti vienetu:

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

Paspaudus ant mygtuko, pastraipos tekstas turi tapti paryškintu:

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

Paspaudus ant mygtuko, turi būti išvesta skaičių iš pastraipų suma:

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

Paspaudus ant pastraipos, į jos pabaigą turi būti pridėtas nurodytas tekstas:

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

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

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

Paspaudus ant mygtuko, kiekvienos pastraipos tekstas turi tapti paryškintu:

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

Paspaudus ant mygtuko, į konsolę turi būti išvesta skaičių iš pastraipų suma:

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

Į input laukus įvedami skaičiai. Paspaudus ant mygtuko į konsolę turi būti išvesta skaičių iš input laukų suma:

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

Į pirmus du input laukus įvedami skaičiai. Paspaudus ant mygtuko į trečią input lauką turi būti išvesta šių skaičių suma:

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

Į pirmus du input laukus įvedami skaičiai. Paspaudus ant mygtuko į pastraipą turi būti išvesta šių skaičių suma:

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

Paspaudus ant mygtuko reikia patikrinti, ar tekstas kiekviename input lauke atitinka jo data atributo tekstą:

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

Paspaudus ant mygtuko reikia patikrinti, ar tekstas kiekviename input lauke atitinka atitinkamo masyvo elemento tekstą:

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

Į input laukus įvedami skaičiai. Paspaudus ant mygtuko į konsolę turi būti išvesta įvestų skaičių suma:

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

Į pirmus du input laukus įvedami skaičiai. Paspaudus ant mygtuko į trečią input lauką turi būti išvesta šių skaičių suma:

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

Į input lauką įvedamas skaičius. Praradus fokusą į konsolę turi būti išvesta šio skaičiaus skaitmenų suma:

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