Iskanje napak v kodi z DOM v JavaScript

V naslednjih nalogah je neki programer napisal kodo in morda naredil napake. Preveriti morate, ali koda deluje, kot je opisano. Če koda ne deluje pravilno, morate napake popraviti.

Koda bi morala dodati tekst na konec vsakega odstavka:

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

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

Ob kliku na odstavek naj se njegova vrednost poveča za ena:

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

Ob kliku na gumb naj tekst odstavka postane krepak:

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

Ob kliku na gumb naj se izpiše vsota števil iz odstavkov:

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

Ob kliku na odstavek naj se mu na konec doda določen tekst:

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

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

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

Ob kliku na gumb naj tekst vsakega odstavka postane krepak:

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

Ob kliku na gumb naj se v konzolo izpiše vsota števil iz odstavkov:

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

V vnosna polja se vnesejo števila. Ob kliku na gumb se mora v konzolo izpisati vsota števil iz vnosnih polj:

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

V prvi dve vnosni polji se vnesejo števila. Ob kliku na gumb naj se v tretje vnosno polje izpiše vsota teh števil:

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

V prvi dve vnosni polji se vnesejo števila. Ob kliku na gumb naj se v odstavek izpiše vsota teh števil:

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

Ob kliku na gumb je treba preveriti, ali se tekst v vsakem vnosnem polju ujema z tekstom njegovega data atributa:

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

Ob kliku na gumb je treba preveriti, ali se tekst v vsakem vnosnem polju ujema z tekstom ustreznega elementa tabele:

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

V vnosna polja se vnesejo števila. Ob kliku na gumb naj se v konzolo izpiše vsota vnešenih števil:

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

V prvi dve vnosni polji se vnesejo števila. Ob kliku na gumb naj se v tretje vnosno polje izpiše vsota teh števil:

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

V vnosno polje se vnese število. Ob izgubi fokusa naj se v konzolo izpiše vsota števk tega števila:

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