DOM-თან დაკავშირებული შეცდომების პოვნა JavaScript-ში

შემდეგ ამოცანებში რაღაც პროგრამისტმა დაწერა კოდი და, შესაძლოა, დაუშვა მასში შეცდომები. თქვენ უნდა შეამოწმოთ, აკეთებს თუ არა კოდი იმას, რაც აღწერილია. თუ კოდი მუშაობს არასწორად, თქვენ უნდა გამასწოროთ შეცდომები.

კოდმა უნდა დაამატოს ტექსტი ყოველი აბზაცის ბოლოში:

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

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

აბზაცზე დაწკაპუნებით მისი მნიშვნელობა უნდა გაიზარდოს ერთეულით:

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

ღილაკზე დაწკაპუნებით აბზაცის ტექსტი უნდა გახდეს მსხვილი:

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

ღილაკზე დაწკაპუნებით უნდა გამოიპრინტოს აბზაცებში მოცემული რიცხვების ჯამი:

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

აბზაცზე დაწკაპუნებით მას ბოლოში უნდა დაემატოს მითითებული ტექსტი:

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

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

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

ღილაკზე დაწკაპუნებით თითოეული აბზაცის ტექსტი უნდა გახდეს მსხვილი:

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

ღილაკზე დაწკაპუნებით კონსოლში უნდა გამოიპრინტოს აბზაცებში მოცემული რიცხვების ჯამი:

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

პირველ ორ ინფუთში შეჰყავთ რიცხვები. ღილაკზე დაწკაპუნებით მესამე ინფუთში უნდა გამოიპრინტოს ამ რიცხვების ჯამი:

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

პირველ ორ ინფუთში შეჰყავთ რიცხვები. ღილაკზე დაწკაპუნებით აბზაცში უნდა გამოიპრინტოს ამ რიცხვების ჯამი:

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

ღილაკზე დაწკაპუნებით უნდა შევამოწმოთ, ემთხვევა თუ არა თითოეულ ინფუთში ტექსტი მის data ატრიბუტის ტექსტს:

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

ღილაკზე დაწკაპუნებით უნდა შევამოწმოთ, ემთხვევა თუ არა თითოეულ ინფუთში ტექსტი მასივის შესაბამისი ელემენტის ტექსტს:

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

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