DOM-ի հետ JavaScript-ում կոդի սխալների որոնում

Հաջորդ առաջադրանքներում ինչ-որ ծրագրավորող գրել է կոդ և, հնարավոր է, թույլ տվել դրանում սխալներ: Դուք պետք է ստուգեք, արդյոք կոդը անում է նշվածը: Եթե կոդը աշխատում է ոչ ճիշտ, դուք պետք է ուղղեք սխալները:

Կոդը պետք է ավելացնի տեքստ յուրաքանչյուր պարբերության վերջում՝ յուրաքանչյուր պարբերության վերջում:

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

let elems = document.querySelectorAll('p');
for (let elem of elems) {
	elem.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(this.textContent) + 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.textContent + '</b>';
});

Կոճակի վրա կտտացնելիս պետք է արտածվի պարբերությունների թվերի գումարը:

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

Պարբերության վրա կտտացնելիս նրա վերջում պետք է ավելացվի նշված տեքստը:

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

Կոճակի վրա կտտացնելիս յուրաքանչյուր պարբերության տեքստը պետք է դառնա թավ:

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

Կոճակի վրա կտտացնելիս կոնսոլում պետք է արտածվի պարբերությունների թվերի գումարը:

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

Առաջին երկու դաշտերում մուտքագրվում են թվեր: Կոճակի վրա կտտացնելիս երրորդ դաշտում պետք է արտածվի այդ թվերի գումարը:

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

Առաջին երկու դաշտերում մուտքագրվում են թվեր: Կոճակի վրա կտտացնելիս պարբերությունում պետք է արտածվի այդ թվերի գումարը:

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

Կոճակի վրա կտտացնելիս պետք է ստուգել, արդյոք յուրաքանչյուր դաշտի տեքստը համընկնում է նրա 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('#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')
		}
	}
});

Կոճակի վրա կտտացնելիս պետք է ստուգել, արդյոք յուրաքանչյուր դաշտի տեքստը համընկնում է զանգվածի համապատասխան տարրի տեքստի հետ:

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

<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 id="inp">

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

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