Mencari Ralat dalam Kod DOM JavaScript
Dalam tugasan berikutnya, seorang pengaturcara telah menulis kod dan mungkin melakukan kesilapan di dalamnya. Anda perlu menyemak sama ada kod tersebut melakukan seperti yang diterangkan. Jika kod tidak berfungsi dengan betul, anda perlu membetulkan kesilapan tersebut.
Kod sepatutnya menambah teks pada penghujung setiap perenggan:
html<p>1</p>
<p>2</p>
<p>3</p>javascriptlet elems = document.querySelector('p');
elems.textContent += '!';
Apabila diklik pada perenggan, nilainya sepatutnya bertambah satu:
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(1);
});
}
Apabila diklik pada butang, teks perenggan sepatutnya menjadi tebal:
html<p>teks</p>
<button>klik</button>javascriptlet button = document.querySelector('button');
let elem = document.querySelector('p');
button.addEventListener('click', function() {
elem.innerHTML = '<b>elem.innerHTML</b>';
});
Apabila diklik pada butang, sepatutnya dipaparkan jumlah nombor dari perenggan:
html<p>1</p>
<p>2</p>
<p>3</p>
<button>klik</button>javascriptlet 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);
});
Apabila diklik pada perenggan, teks yang ditentukan sepatutnya ditambah pada penghujungnya:
html<p>1</p>
<p>2</p>
<p>3</p>javascriptlet elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', () => {
this.textContent += '!';
});
}
Apabila diklik pada butang, teks setiap perenggan sepatutnya menjadi tebal:
html<p>teks1</p>
<p>teks2</p>
<p>teks3</p>
<button>klik</button>javascriptlet button = document.querySelector('button');
let elems = document.querySelectorAll('p');
button.addEventListener('click', function() {
for (let elem of elems) {
elem.innerHTML = '<b>+elem.innerHTML+</b>';
}
});
Apabila diklik pada butang, jumlah nombor dari perenggan sepatutnya dipaparkan dalam konsol:
html<p>1</p>
<p>2</p>
<p>3</p>
<button>klik</button>javascriptlet 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);
});
}
Nombor dimasukkan ke dalam input. Apabila diklik pada butang, jumlah nombor dari input sepatutnya dipaparkan dalam konsol:
html<input>
<input>
<input>
<button>klik</button>javascriptlet 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);
});
Nombor dimasukkan ke dalam dua input pertama. Apabila diklik pada butang, jumlah nombor tersebut sepatutnya dipaparkan dalam input ketiga:
html<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">klik</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.textContent = inp1.textContent + inp2.textContent;
});
Nombor dimasukkan ke dalam dua input pertama. Apabila diklik pada butang, jumlah nombor tersebut sepatutnya dipaparkan dalam perenggan:
html<input id="inp1">
<input id="inp2">
<p id="res"></p>
<button id="btn">klik</button>javascriptlet 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;
});
Apabila diklik pada butang, perlu disemak, sama ada teks dalam setiap input sepadan dengan teks atribut data-nya:
html<input data-text="text1">
<input data-text="text2">
<input data-text="text3">
<button id="btn">klik</button>javascriptlet 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')
}
}
});
Apabila diklik pada butang, perlu disemak, sama ada teks dalam setiap input sepadan dengan teks elemen array yang sepadan:
html<input>
<input>
<input>
<button id="btn">klik</button>javascriptlet inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')
let texts = [
'text1',
'text2',
'text3',
];
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')
}
}
}
});
Nombor dimasukkan ke dalam input. Apabila diklik pada butang, jumlah nombor yang dimasukkan sepatutnya dipaparkan dalam konsol:
html<input>
<input>
<input>
<button id="btn">klik</button>javascriptlet 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);
});
Nombor dimasukkan ke dalam dua input pertama. Apabila diklik pada butang, jumlah nombor tersebut sepatutnya dipaparkan dalam input ketiga:
html<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">klik</button>javascriptlet 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;
});
Nombor dimasukkan ke dalam input. Apabila kehilangan fokus, jumlah digit nombor tersebut sepatutnya dipaparkan dalam konsol:
html<input id="inp">javascriptlet 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);
});