DOM bilan JavaScript kodida xatolarni topish
Quyidagi vazifalarda ma'lum bir dasturchi kod yozgan va unda xatolar qilgan bo'lishi mumkin. Siz tekshirishingiz kerak, kod tavsiflangan ishni bajaradimi yoki yo'q. Agar kod noto'g'ri ishlasa, siz xatolarni tuzatishingiz kerak.
Kod har bir abzas oxiriga matn qo'shishi kerak:
html<p>1</p>
<p>2</p>
<p>3</p>javascriptlet elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.textContent += '!';
}
Abzas ustiga bosilganda uning qiymati bittaga oshirilishi kerak:
html<p>1</p>
<p>2</p>
<p>3</p>javascriptlet elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', function() {
this.textContent = Number(this.textContent) + 1;
});
}
Tugma ustiga bosilganda abzas matni qalin shriftga o'zgartirilishi kerak:
html<p>text</p>
<button>click</button>javascriptlet button = document.querySelector('button');
let elem = document.querySelector('p');
button.addEventListener('click', function() {
elem.innerHTML = '<b>' + elem.textContent + '</b>';
});
Tugma ustiga bosilganda abzatlardagi sonlar yig'indisi chiqishi kerak:
html<p>1</p>
<p>2</p>
<p>3</p>
<button>click</button>javascriptlet 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);
});
Abzas ustiga bosilganda uning oxiriga berilgan matn qo'shilishi kerak:
html<p>1</p>
<p>2</p>
<p>3</p>javascriptlet elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', function() {
this.textContent += '!';
});
}
Tugma ustiga bosilganda har bir abzas matni qalin shriftga o'zgartirilishi kerak:
html<p>text1</p>
<p>text2</p>
<p>text3</p>
<button>click</button>javascriptlet button = document.querySelector('button');
let elems = document.querySelectorAll('p');
button.addEventListener('click', function() {
for (let elem of elems) {
elem.innerHTML = '<b>' + elem.textContent + '</b>';
}
});
Tugma ustiga bosilganda konsolga abzatlardagi sonlar yig'indisi chiqishi kerak:
html<p>1</p>
<p>2</p>
<p>3</p>
<button>click</button>javascriptlet button = document.querySelector('button');
let elems = document.querySelectorAll('p');
let sum = 0;
for (let elem of elems) {
sum += Number(elem.textContent);
}
button.addEventListener('click', function() {
console.log(sum);
});
Inputlarga sonlar kiritiladi. Tugma ustiga bosilganda konsolga inputlardagi sonlar yig'indisi chiqishi kerak:
html<input>
<input>
<input>
<button>click</button>javascriptlet 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);
});
Dastlabki ikkita inputga sonlar kiritiladi. Tugma ustiga bosilganda uchinchi inputga bu sonlar yig'indisi chiqishi kerak:
html<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">click</button>javascriptlet 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);
});
Dastlabki ikkita inputga sonlar kiritiladi. Tugma ustiga bosilganda abzasga bu sonlar yig'indisi chiqishi kerak:
html<input id="inp1">
<input id="inp2">
<p id="res"></p>
<button id="btn">click</button>javascriptlet 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);
});
Tugma ustiga bosilganda tekshirish kerak, har bir inputdagi matn uning data atributi matniga mos keladimi yoki yo'q:
html<input data-text="text1">
<input data-text="text2">
<input data-text="text3">
<button id="btn">click</button>javascriptlet 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')
}
}
});
Tugma ustiga bosilganda tekshirish kerak, har bir inputdagi matn massivning mos keladigan elementi matniga mos keladimi yoki yo'q:
html<input>
<input>
<input>
<button id="btn">click</button>javascriptlet 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')
}
}
});
Inputlarga sonlar kiritiladi. Tugma ustiga bosilganda konsolga kiritilgan sonlar yig'indisi chiqishi kerak:
html<input>
<input>
<input>
<button id="btn">click</button>javascriptlet 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);
});
Dastlabki ikkita inputga sonlar kiritiladi. Tugma ustiga bosilganda uchinchi inputga bu sonlar yig'indisi chiqishi kerak:
html<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">click</button>javascriptlet 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;
});
Inputga son kiritiladi. Fokus yo'qotilganda konsolga shu son raqamlari yig'indisi chiqishi kerak:
html<input id="inp">javascriptlet inp = document.querySelector('#inp');
inp.addEventListener('blur', function() {
let str = inp.value;
let digits = str.split('');
let sum = 0;
for (let digit of digits) {
sum += Number(digit);
}
console.log(sum);
});