Mencari Kesalahan dalam Kode dengan DOM di JavaScript
Dalam tugas-tugas berikutnya, seorang programmer menulis kode dan mungkin melakukan kesalahan di dalamnya. Anda harus memeriksa apakah kode melakukan apa yang dijelaskan. Jika kode berjalan tidak benar, Anda harus memperbaiki kesalahannya.
Kode harus menambahkan teks ke akhir setiap paragraf:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelector('p');
elems.textContent += '!';
Pada klik paragraf, nilainya harus bertambah satu:
<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);
});
}
Pada klik tombol, teks paragraf harus menjadi tebal:
<p>text</p>
<button>click</button>
let button = document.querySelector('button');
let elem = document.querySelector('p');
button.addEventListener('click', function() {
elem.innerHTML = '<b>elem.innerHTML</b>';
});
Pada klik tombol, harus ditampilkan jumlah angka dari paragraf:
<p>1</p>
<p>2</p>
<p>3</p>
<button>click</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);
});
Pada klik paragraf, teks yang ditentukan harus ditambahkan ke akhirnya:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', () => {
this.textContent += '!';
});
}
Pada klik tombol, teks setiap paragraf harus menjadi tebal:
<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.innerHTML+</b>';
}
});
Pada klik tombol, di konsol harus ditampilkan jumlah angka dari paragraf:
<p>1</p>
<p>2</p>
<p>3</p>
<button>click</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);
});
}
Angka dimasukkan ke dalam input. Pada klik tombol, harus ditampilkan jumlah angka dari input di konsol:
<input>
<input>
<input>
<button>click</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);
});
Angka dimasukkan ke dalam dua input pertama. Pada klik tombol, di input ketiga harus ditampilkan jumlah angka-angka ini:
<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.textContent = inp1.textContent + inp2.textContent;
});
Angka dimasukkan ke dalam dua input pertama. Pada klik tombol, di paragraf harus ditampilkan jumlah angka-angka ini:
<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');
button.addEventListener('click', function() {
res.value = inp1.value + inp2.value;
});
Pada klik tombol, perlu diperiksa, apakah teks di setiap input cocok dengan teks atribut data-nya:
<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('#button')
button.addEventListener('click',function() {
for (let input of inputs) {
if (input.value === input.dataset) {
input.classList.add('right')
} else {
input.classList.add('wrong')
}
}
});
Pada klik tombol, perlu diperiksa, apakah teks di setiap input cocok dengan teks elemen array yang sesuai:
<input>
<input>
<input>
<button id="btn">click</button>
let 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')
}
}
}
});
Angka dimasukkan ke dalam input. Pada klik tombol, di konsol harus ditampilkan jumlah angka yang dimasukkan:
<input>
<input>
<input>
<button id="btn">click</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);
});
Angka dimasukkan ke dalam dua input pertama. Pada klik tombol, di input ketiga harus ditampilkan jumlah angka-angka ini:
<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');
let sum = inp1.value + inp2.value;
btn.addEventListener('click', function() {
inp3.value = sum;
});
Sebuah angka dimasukkan ke dalam input. Pada kehilangan fokus, di konsol harus ditampilkan jumlah digit angka ini:
<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);
});
