Virheiden etsiminen DOM-koodista JavaScriptissä

Seuraavissa tehtävissä eräs ohjelmoija on kirjoittanut koodia ja mahdollisesti tehnyt siinä virheitä. Sinun tulee tarkistaa, tekeekö koodi sen, mitä on kuvattu. Jos koodi toimii väärin, sinun tulee korjata virheet.

Koodin tulisi lisätä teksti jokaisen kappaleen loppuun:

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

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

Klikkaamalla kappaletta sen arvon tulisi kasvaa yhdellä:

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

Klikkaamalla painiketta kappaleen tekstin tulisi tulla lihavoiduksi:

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

Klikkaamalla painiketta tulisi näyttää kappaleiden numeroiden summa:

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

Klikkaamalla kappaletta sen loppuun tulisi lisätä annettu teksti:

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

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

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

Klikkaamalla painiketta jokaisen kappaleen tekstin tulisi tulla lihavoiduksi:

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

Klikkaamalla painiketta konsoliin tulisi tulostua kappaleiden numeroiden summa:

<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-kenttiin syötetään numeroita. Klikkaamalla painiketta konsoliin tulisi tulostua input-kenttien numeroiden summa:

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

Kahteen ensimmäiseen input-kenttään syötetään numeroita. Klikkaamalla painiketta kolmanteen input-kenttään tulisi näyttää näiden numeroiden 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;
});

Kahteen ensimmäiseen input-kenttään syötetään numeroita. Klikkaamalla painiketta kappaleeseen tulisi näyttää näiden numeroiden 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;
});

Klikkaamalla painiketta tulee tarkistaa, että jokaisen input-kentän teksti vastaa sen data-attribuutin tekstiä:

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

Klikkaamalla painiketta tulee tarkistaa, että jokaisen input-kentän teksti vastaa vastaavan taulukkoelementin tekstiä:

<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-kenttiin syötetään numeroita. Klikkaamalla painiketta konsoliin tulisi tulostua syötettyjen numeroiden 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);
});

Kahteen ensimmäiseen input-kenttään syötetään numeroita. Klikkaamalla painiketta kolmanteen input-kenttään tulisi näyttää näiden numeroiden 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;
});

Input-kenttään syötetään numero. Kun kenttä menettää fokuksin, konsoliin tulisi tulostua tämän numeron numeroiden 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);
});