Хатогиҳо дар рамз бо 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>матн</p>
<button>клик</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>клик</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>матн1</p>
<p>матн2</p>
<p>матн3</p>
<button>клик</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>клик</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>клик</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">клик</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">клик</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="матн1">
<input data-text="матн2">
<input data-text="матн3">
<button id="btn">клик</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">клик</button>
let inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')
let texts = [
'матн1',
'матн2',
'матн3',
];
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">клик</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">клик</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);
});
