Kļūdu meklēšana DOM kodā JavaScript

Turpmākajos uzdevumos kāds programmētājs uzrakstīja kodu un, iespējams, tajā pieļāva kļūdas. Jums jāpārbauda, vai kods dara to, kas aprakstīts. Ja kods strādā nepareizi, jums jāizlabo kļūdas.

Kodam jāpievieno teksts katra rindkopas beigās:

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

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

Kad noklikšķina uz rindkopas, tās vērtībai jāpalielinās par vienu:

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

Kad noklikšķina uz pogas, rindkopas tekstam jākļūst treknrakstā:

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

Kad noklikšķina uz pogas, jāizvada skaitļu summa no rindkopām:

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

Kad noklikšķina uz rindkopas, tās beigās jāpievieno dotais teksts:

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

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

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

Kad noklikšķina uz pogas, katras rindkopas tekstam jākļūst treknrakstā:

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

Kad noklikšķina uz pogas, konsolē jāizvada skaitļu summa no rindkopām:

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

Ievades laukos tiek ievadīti skaitļi. Kad noklikšķina uz pogas, konsolē jāizvada skaitļu summa no ievades laukiem:

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

Pirmajos divos ievades laukos tiek ievadīti skaitļi. Kad noklikšķina uz pogas, trešajā ievades laukā jāizvada šo skaitļu summa:

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

Pirmajos divos ievades laukos tiek ievadīti skaitļi. Kad noklikšķina uz pogas, rindkopā jāizvada šo skaitļu summa:

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

Kad noklikšķina uz pogas, jāpārbauda, vai teksts katrā ievades laukā sakrīt ar tā data atribūtu:

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

Kad noklikšķina uz pogas, jāpārbauda, vai teksts katrā ievades laukā sakrīt ar atbilstošā masīva elementu:

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

Ievades laukos tiek ievadīti skaitļi. Kad noklikšķina uz pogas, konsolē jāizvada ievadīto skaitļu summa:

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

Pirmajos divos ievades laukos tiek ievadīti skaitļi. Kad noklikšķina uz pogas, trešajā ievades laukā jāizvada šo skaitļu summa:

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

Ievades laukā tiek ievadīts skaitlis. Kad zaudē fokusu, konsolē jāizvada šī skaitļa ciparu summa:

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