⌘K

Tìm lỗi trong mã với DOM trong JavaScript

Trong các nhiệm vụ sau, một lập trình viên đã viết mã và có thể đã mắc lỗi. Bạn phải kiểm tra xem mã có thực hiện đúng mô tả không. Nếu mã hoạt động không chính xác, bạn phải sửa lỗi.

Задание 1

Mã phải thêm văn bản vào cuối mỗi đoạn văn: 

html<p>1</p>
<p>2</p>
<p>3</p>
javascriptlet elems = document.querySelector('p');
elems.textContent += '!';
Задание 2

Khi nhấp vào đoạn văn, giá trị của nó phải tăng lên một: 

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);
  });
}
Задание 3

Khi nhấp vào nút, văn bản của đoạn văn phải trở thành đậm: 

html<p>text</p>
<button>click</button>
javascriptlet button = document.querySelector('button');
let elem   = document.querySelector('p');

button.addEventListener('click', function() {
  elem.innerHTML = '<b>elem.innerHTML</b>';
});
Задание 4

Khi nhấp vào nút, tổng các số từ các đoạn văn phải được hiển thị: 

html<p>1</p>
<p>2</p>
<p>3</p>

<button>click</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);
});
Задание 5

Khi nhấp vào đoạn văn, văn bản đã cho phải được thêm vào cuối nó: 

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 += '!';
  });
}
Задание 6

Khi nhấp vào nút, văn bản của mỗi đoạn văn phải trở thành đậm: 

html<p>text1</p>
<p>text2</p>
<p>text3</p>
<button>click</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>';
  }
});
Задание 7

Khi nhấp vào nút, tổng các số từ các đoạn văn phải được hiển thị trong console: 

html<p>1</p>
<p>2</p>
<p>3</p>

<button>click</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);
  });
}
Задание 8

Các số được nhập vào các ô input. Khi nhấp vào nút tổng các số từ các ô input phải được hiển thị trong console: 

html<input>
<input>
<input>

<button>click</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);
});
Задание 9

Các số được nhập vào hai ô input đầu tiên. Khi nhấp vào nút, tổng của các số này phải được hiển thị trong ô input thứ ba: 

html<input id="inp1">
<input id="inp2">
<input id="inp3">

<button id="btn">click</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;
});
Задание 10

Các số được nhập vào hai ô input đầu tiên. Khi nhấp vào nút, tổng của các số này phải được hiển thị trong đoạn văn: 

html<input id="inp1">
<input id="inp2">
<p id="res"></p>

<button id="btn">click</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;
});
Задание 11

Khi nhấp vào nút, cần kiểm tra xem văn bản trong mỗi ô input có khớp với văn bản của thuộc tính data của nó không: 

html<input data-text="text1">
<input data-text="text2">
<input data-text="text3">

<button id="btn">click</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')
    }
  }
});
Задание 12

Khi nhấp vào nút, cần kiểm tra xem văn bản trong mỗi ô input có khớp với văn bản của phần tử tương ứng trong mảng không: 

html<input>
<input>
<input>

<button id="btn">click</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')
      }
    }
  }
});
Задание 13

Các số được nhập vào các ô input. Khi nhấp vào nút, tổng các số đã nhập phải được hiển thị trong console: 

html<input>
<input>
<input>

<button id="btn">click</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);
});
Задание 14

Các số được nhập vào hai ô input đầu tiên. Khi nhấp vào nút, tổng của các số này phải được hiển thị trong ô input thứ ba: 

html<input id="inp1">
<input id="inp2">
<input id="inp3">

<button id="btn">click</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;
});
Задание 15

Một số được nhập vào ô input. Khi mất focus, tổng các chữ số của số này phải được hiển thị trong console: 

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);
});
BackMẹo viết mã với ví dụ về DOM trong JavaScriptNextLuyện tập kiến thức đã học về làm việc với DOM