JavaScript හි DOM සමග කේතයේ දෝෂ සෙවීම

පහත කාර්යයන්හි දී, කිසියම් ක්‍රමලේඛකයෙක් කේතය ලිවීය සහ, සමහර විට එහි දෝෂ සිදු කර ඇත. ඔබ පරීක්ෂා කළ යුතුය, විස්තර කර ඇති දේ කේතය කරන්නේ ද නැද්ද කියා. කේතය වැරදි ලෙස ක්‍රියා කරන්නේ නම්, ඔබ දෝෂ නිරාකරණය කළ යුතුය.

කේතය එක් එක් ඡේදයේ අවසානයට පෙළ එකතු කළ යුතුය:

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