DOM ile JavaScript Kodunda Hata Arama

Aşağıdaki görevlerde bir programcı kod yazmış ve muhtemelen içinde hatalar yapmıştır. Kodun açıklandığı gibi çalışıp çalışmadığını kontrol etmelisiniz. Eğer kod doğru çalışmıyorsa, hataları düzeltmelisiniz.

Kod, her paragrafın sonuna metin eklemelidir:

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

let elems = document.querySelectorAll('p');
for (let elem of elems) {
	elem.textContent += '!';
}

Bir paragrafa tıklandığında, değeri bir artırılmalıdır:

<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(this.textContent) + 1;
	});
}

Butona tıklandığında, paragrafın metni kalın yapılmalıdır:

<p>text</p>
<button>click</button>

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

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

Butona tıklandığında, paragraflardaki sayıların toplamı yazdırılmalıdır:

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

<button>click</button>

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

button.addEventListener('click', function() {
	let sum = 0;
	
	for (let elem of elems) {
		sum += Number(elem.textContent);
	}
	
	console.log(sum);
});

Bir paragrafa tıklandığında, sonuna belirtilen metin eklenmelidir:

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

Butona tıklandığında, her paragrafın metni kalın yapılmalıdır:

<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.textContent + '</b>';
	}
});

Butona tıklandığında, konsola paragraflardaki sayıların toplamı yazdırılmalıdır:

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

<button>click</button>

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

button.addEventListener('click', function() {
	let sum = 0;
	for (let elem of elems) {
		sum += Number(elem.textContent);
	}
	console.log(sum);
});

Input alanlarına sayılar girilir. Butona tıklandığında, konsola inputlardaki sayıların toplamı yazdırılmalıdır:

<input>
<input>
<input>

<button>click</button>

let button = document.querySelector('button');
let elems  = document.querySelectorAll('input');

button.addEventListener('click', function() {
	let sum = 0;
	for (let elem of elems) {
		sum += Number(elem.value);
	}
	console.log(sum);
});

İlk iki inputa sayılar girilir. Butona tıklandığında, üçüncü inputa bu sayıların toplamı yazdırılmalıdır:

<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.value = Number(inp1.value) + Number(inp2.value);
});

İlk iki inputa sayılar girilir. Butona tıklandığında, paragrafa bu sayıların toplamı yazdırılmalıdır:

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

btn.addEventListener('click', function() {
	res.textContent = Number(inp1.value) + Number(inp2.value);
});

Butona tıklandığında, her inputtaki metnin kendi data özniteliğindeki metinle eşleşip eşleşmediği kontrol edilmelidir:

<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('#btn')

button.addEventListener('click',function() {
	for (let input of inputs) {
		if (input.value === input.dataset.text) {
			input.classList.add('right')
		} else {
			input.classList.add('wrong')
		}
	}
});

Butona tıklandığında, her inputtaki metnin dizideki karşılık gelen elemanla eşleşip eşleşmediği kontrol edilmelidir:

<input>
<input>
<input>

<button id="btn">click</button>

let inputs = document.querySelectorAll('input')
let button = document.querySelector('#btn')

let texts = [
	'text1',
	'text2',
	'text3',
];

button.addEventListener('click',function() {
	for (let i = 0; i < inputs.length; i++) {
		if (inputs[i].value === texts[i]) {
			inputs[i].classList.add('right')
		} else {
			inputs[i].classList.add('wrong')
		}
	}
});

Input alanlarına sayılar girilir. Butona tıklandığında, konsola girilen sayıların toplamı yazdırılmalıdır:

<input>
<input>
<input>

<button id="btn">click</button>

let inputs = document.querySelectorAll('input');
let btn = document.querySelector('#btn');

btn.addEventListener('click', function() {
	let sum = 0;
	for (let input of inputs) {
		sum += Number(input.value);
	}
	console.log(sum);
});

İlk iki inputa sayılar girilir. Butona tıklandığında, üçüncü inputa bu sayıların toplamı yazdırılmalıdır:

<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() {
	let sum  = Number(inp1.value) + Number(inp2.value);
	inp3.value = sum;
});

Input alanına bir sayı girilir. Odak kaybedildiğinde, konsola bu sayının basamakları toplamı yazdırılmalıdır:

<input id="inp">

let inp = document.querySelector('#inp');

inp.addEventListener('blur', function() {
	let digits = this.value.split('').map(Number);
	let sum = 0;
	
	for (let digit of digits) {
		sum += digit;
	}
	
	console.log(sum);
});