Kutafuta Makosa katika Msimbo na DOM katika JavaScript
Katika kazi zifuatazo programu fulani aliandika msimbo na labda, alifanya makosa ndani yake. Unapaswa kuangalia, je, msimbo unafanya kile kilichoelezewa. Ikiwa msimbo haufanyi kazi sawasawa, unapaswa kurekebisha makosa.
Msimbo unapaswa kuongeza maandishi mwishoni mwa kila aya:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelector('p');
elems.textContent += '!';
Kwa kubofya kwenye aya thamani yake inapaswa kuongezeka kwa moja:
<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);
});
}
Kwa kubofya kwenye kifungo maandishi ya aya inapaswa kuwa mazito:
<p>maandishi</p>
<button>bofya</button>
let button = document.querySelector('button');
let elem = document.querySelector('p');
button.addEventListener('click', function() {
elem.innerHTML = '<b>elem.innerHTML</b>';
});
Kwa kubofya kwenye kifungo inapaswa kutolewa jumla ya nambari kutoka kwenye aya:
<p>1</p>
<p>2</p>
<p>3</p>
<button>bofya</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);
});
Kwa kubofya kwenye aya mwishoni mwake inapaswa kuongezwa maandishi yaliyopangwa:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', () => {
this.textContent += '!';
});
}
Kwa kubofya kwenye kifungo maandishi ya kila aya inapaswa kuwa mazito:
<p>maandishi1</p>
<p>maandishi2</p>
<p>maandishi3</p>
<button>bofya</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>';
}
});
Kwa kubofya kwenye kifungo kwenye konsoli inapaswa kutolewa jumla ya nambari kutoka kwenye aya:
<p>1</p>
<p>2</p>
<p>3</p>
<button>bofya</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);
});
}
Kwenye vitingujo vinaingizwa nambari. Kwa kubofya kwenye kifungo kwenye konsoli inapaswa kutolewa jumla ya nambari kutoka kwenye vitingujo:
<input>
<input>
<input>
<button>bofya</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);
});
Kwenye vitingujo viwili vya kwanza vinaingizwa nambari. Kwa kubofya kwenye kifungo kwenye kitingujo cha tatu inapaswa kutolewa jumla ya nambari hizi:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">bofya</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;
});
Kwenye vitingujo viwili vya kwanza vinaingizwa nambari. Kwa kubofya kwenye kifungo kwenye aya inapaswa kutolewa jumla ya nambari hizi:
<input id="inp1">
<input id="inp2">
<p id="res"></p>
<button id="btn">bofya</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;
});
Kwa kubofya kwenye kifungo inahitajika kuangalia, kwamba maandishi kwenye kila kitingujo yanafanana na maandishi ya data attribute yake:
<input data-text="maandishi1">
<input data-text="maandishi2">
<input data-text="maandishi3">
<button id="btn">bofya</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')
}
}
});
Kwa kubofya kwenye kifungo inahitajika kuangalia, kwamba maandishi kwenye kila kitingujo yanafanana na maandishi ya kipengele kinachofanana cha safu:
<input>
<input>
<input>
<button id="btn">bofya</button>
let inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')
let texts = [
'maandishi1',
'maandishi2',
'maandishi3',
];
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')
}
}
}
});
Kwenye vitingujo vinaingizwa nambari. Kwa kubofya kwenye kifungo kwenye konsoli inapaswa kutolewa jumla ya nambari zilizoingizwa nambari:
<input>
<input>
<input>
<button id="btn">bofya</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);
});
Kwenye vitingujo viwili vya kwanza vinaingizwa nambari. Kwa kubofya kwenye kifungo kwenye kitingujo cha tatu inapaswa kutolewa jumla ya nambari hizi:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">bofya</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;
});
Kwenye kitingujo kinaingizwa nambari. Kwa kupoteza umakini kwenye konsoli inapaswa kutolewa jumla ya tarakimu za nambari hii:
<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);
});
