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