DOM билан JavaScript да кодаги хатоларни излаш
Куйидаги машқларда бир программист код ёзган ва, эҳтимол, унда хатолар қилган. Сиз коднинг тавсифланган ишни бажараётганини текширишингиз керак. Агар код нотўғри ишласа, сиз хатоларни тўғрилашингиз керак.
Код ҳар бир абзацнинг охирига матн қўшиши керак:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.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(this.textContent) + 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.textContent + '</b>';
});
Тугма босилганда абзацлардаги сонлар йиғиндиси чиқарилиши керак:
<p>1</p>
<p>2</p>
<p>3</p>
<button>click</button>
let 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);
});
Абзац босилганда унинг охирига берилган матн қўшилиши керак:
<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 += '!';
});
}
Тугма босилганда ҳар бир абзац матни қалин бўлиши керак:
<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.textContent + '</b>';
}
});
Тугма босилганда консольга абзацлардаги сонлар йиғиндиси чиқарилиши керак:
<p>1</p>
<p>2</p>
<p>3</p>
<button>click</button>
let 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);
});
Инпутларга сонлар киритилади. Тугма босилганда консольга инпутлардаги сонлар йиғиндиси чиқарилиши керак:
<input>
<input>
<input>
<button>click</button>
let 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);
});
Биринчи икки инпутга сонлар киритилади. Тугма босилганда учинчи инпутга ушбу сонлар йиғиндиси чиқарилиши керак:
<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.value = Number(inp1.value) + Number(inp2.value);
});
Биринчи икки инпутга сонлар киритилади. Тугма босилганда абзацга ушбу сонлар йиғиндиси чиқарилиши керак:
<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');
btn.addEventListener('click', function() {
res.textContent = Number(inp1.value) + Number(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('#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')
}
}
});
Тугма босилганда ҳар бир инпутдаги матн массивнинг мос элемент матнига тўғри келиши текширилиши керак:
<input>
<input>
<input>
<button id="btn">click</button>
let 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')
}
}
});
Инпутларга сонлар киритилади. Тугма босилганда консольга киритилган сонлар йиғиндиси чиқарилиши керак:
<input>
<input>
<input>
<button id="btn">click</button>
let 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);
});
Биринчи икки инпутга сонлар киритилади. Тугма босилганда учинчи инпутга ушбу сонлар йиғиндиси чиқарилиши керак:
<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() {
let sum = Number(inp1.value) + Number(inp2.value);
inp3.value = sum;
});
Инпутга сон киритилади. Фокус йўқотилганда консольга ушбу соннинг рақамлари йиғиндиси чиқарилиши керак:
<input id="inp">
let inp = document.querySelector('#inp');
inp.addEventListener('blur', function() {
let digits = this.value.split('');
let sum = 0;
for (let digit of digits) {
sum += Number(digit);
}
console.log(sum);
});
