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