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

ခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ စာပိုဒ်များမှ နံပါတ်များ၏ ပေါင်းလဒ်ကို console တွင် ပြသရမည်။

<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 များတွင် နံပါတ်များ ထည့်သွင်းထားသည်။ ခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ console တွင် input များမှ နံပါတ်များ၏ ပေါင်းလဒ်ကို ပြသရမည်။

<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 နှစ်ခုတွင် နံပါတ်များ ထည့်သွင်းထားသည်။ ခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ တတိယ input တွင် ထိုနံပါတ်များ၏ ပေါင်းလဒ်ကို ပြသရမည်။

<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 နှစ်ခုတွင် နံပါတ်များ ထည့်သွင်းထားသည်။ ခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ စာပိုဒ်တွင် ထိုနံပါတ်များ၏ ပေါင်းလဒ်ကို ပြသရမည်။

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

ခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ စစ်ဆေးရမည်။ တစ်ခုချင်းစီသော input ထဲရှိ စာသားသည် ၎င်း၏ data attribute ရှိ စာသားနှင့် ကိုက်ညီမှု ရှိ/မရှိ။

<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 ထဲရှိ စာသားသည် သက်ဆိုင်ရာ array element ၏ စာသားနှင့် ကိုက်ညီမှု ရှိ/မရှိ။

<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 များတွင် နံပါတ်များ ထည့်သွင်းထားသည်။ ခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ console တွင် ထည့်သွင်းထားသော နံပါတ်များ၏ ပေါင်းလဒ်ကို ပြသရမည်။

<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 တွင် နံပါတ်တစ်ခု ထည့်သွင်းထားသည်။ focus ပြုတ်သွားသောအခါ console တွင် ထိုနံပါတ်၏ ဂဏန်းများ၏ ပေါင်းလဒ်ကို ပြသရမည်။

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