Soek Foute in Kode met DOM in JavaScript
In die volgende take het 'n programmeur kode geskryf en moontlik foute daarin gemaak. Jy moet kontroleer of die kode doen wat beskryf word. As die kode onvanpas werk, moet jy die foute regmaak.
Die kode moet teks aan die einde van elke paragraaf byvoeg:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelector('p');
elems.textContent += '!';
Met 'n klik op 'n paragraaf moet sy waarde met een verhoog word:
<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);
});
}
Met 'n klik op die knoppie moet die paragraafteks vet word:
<p>teks</p>
<button>kliek</button>
let button = document.querySelector('button');
let elem = document.querySelector('p');
button.addEventListener('click', function() {
elem.innerHTML = '<b>elem.innerHTML</b>';
});
Met 'n klik op die knoppie moet die som van die getalle uit die paragrawe vertoon word:
<p>1</p>
<p>2</p>
<p>3</p>
<button>kliek</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(som);
});
Met 'n klik op 'n paragraaf moet 'n gegewe teks aan sy einde bygevoeg word:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', () => {
this.textContent += '!';
});
}
Met 'n klik op die knoppie moet die teks van elke paragraaf vet word:
<p>teks1</p>
<p>teks2</p>
<p>teks3</p>
<button>kliek</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>';
}
});
Met 'n klik op die knoppie moet die som van die getalle uit die paragrawe in die konsole verskyn:
<p>1</p>
<p>2</p>
<p>3</p>
<button>kliek</button>
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
let som = 0;
for (let elem of elems) {
som = elem.textContent + 1;
button.addEventListener('click', function() {
console.log(som);
});
}
Getalle word in die invoervelde ingevoer. Met 'n klik op die knoppie moet die som van die getalle uit die invoervelde in die konsole verskyn:
<input>
<input>
<input>
<button>kliek</button>
let button = document.querySelector('button');
let elems = document.querySelectorAll('input');
let som = 0;
for (let elem of elems) {
som += elem.value;
}
button.addEventListener('click', function() {
console.log(som);
});
Getalle word in die eerste twee invoervelde ingevoer. Met 'n klik op die knoppie moet die som van hierdie getalle in die derde invoerveld verskyn:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">kliek</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;
});
Getalle word in die eerste twee invoervelde ingevoer. Met 'n klik op die knoppie moet die som van hierdie getalle in die paragraaf verskyn:
<input id="inp1">
<input id="inp2">
<p id="res"></p>
<button id="btn">kliek</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;
});
Met 'n klik op die knoppie moet gekontroleer word of die teks in elke invoerveld ooreenstem met die teks van sy data-kenmerk:
<input data-text="teks1">
<input data-text="teks2">
<input data-text="teks3">
<button id="btn">kliek</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('reg')
} else {
input.classList.add('verkeerd')
}
}
});
Met 'n klik op die knoppie moet gekontroleer word of die teks in elke invoerveld ooreenstem met die teks van die ooreenstemmende element van die skikking:
<input>
<input>
<input>
<button id="btn">kliek</button>
let inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')
let tekste = [
'teks1',
'teks2',
'teks3',
];
button.addEventListener('click',function() {
for (let input of inputs) {
for (let teks of tekste) {
if (input.value === teks) {
input.classList.add('reg')
} else {
input.classList.add('verkeerd')
}
}
}
});
Getalle word in die invoervelde ingevoer. Met 'n klik op die knoppie moet die som van die ingevoerde getalle in die konsole verskyn:
<input>
<input>
<input>
<button id="btn">kliek</button>
let inputs = document.querySelectorAll('inputs');
let btn = document.querySelector('#btm');
let som = 0;
btn.addEventListener('click', function() {
for (let input of inputs) {
som += Number(input);
}
console.log(som);
});
Getalle word in die eerste twee invoervelde ingevoer. Met 'n klik op die knoppie moet die som van hierdie getalle in die derde invoerveld verskyn:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">kliek</button>
let btn = document.querySelector('#btn');
let inp1 = document.querySelector('#inp1');
let inp2 = document.querySelector('#inp2');
let inp3 = document.querySelector('#inp3');
let som = inp1.value + inp2.value;
btn.addEventListener('click', function() {
inp3.value = som;
});
'n Getal word in die invoerveld ingevoer. Met verlies van fokus moet die som van die syfers van hierdie getal in die konsole verskyn:
<input id="inp">
let inp = document.querySelector('#inp').value;
inp.addEventListener('blur', function() {
let syfers = +inp.split('');
let som = 0;
for (let syfer of syfers) {
som += syfer;
}
console.log(som);
});
