⌘K

DOM арқылы JavaScript кодындағы қателерді іздеу

Келесі тапсырмаларда белгілі бір бағдарламашы код жазған және ол кодта қателер жіберген болуы мүмкін. Сіз кодтың сипатталған нәрсені жасайтынын тексеруіңіз керек. Егер код дұрыс жұмыс істемесе, сіз қателерді түзетуіңіз керек.

Задание 1

Код әрбір абзацтың соңына мәтін қосуы керек: 

html<p>1</p>
<p>2</p>
<p>3</p>
javascriptlet elems = document.querySelectorAll('p');
for (let elem of elems) {
  elem.textContent += '!';
}
Задание 2

Абзацқа басқанда оның мәні бірлікке өсуі керек: 

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(this.textContent) + 1;
  });
}
Задание 3

Түймешені басқанда абзац мәтіні қалың болуы керек: 

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.textContent + '</b>';
});
Задание 4

Түймешені басқанда абзацтардағы сандардың қосындысы шығуы керек: 

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

<button>click</button>
javascriptlet button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

button.addEventListener('click', function() {
  let sum = 0;
  
  for (let elem of elems) {
    sum += Number(elem.textContent);
  }
  
  console.log(sum);
});
Задание 5

Абзацқа басқанда оның соңына берілген мәтін қосылуы керек: 

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

Түймешені басқанда әрбір абзацтың мәтіні қалың болуы керек: 

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.textContent + '</b>';
  }
});
Задание 7

Түймешені басқанда консольге абзацтардағы сандардың қосындысы шығуы керек: 

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

<button>click</button>
javascriptlet button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

button.addEventListener('click', function() {
  let sum = 0;
  for (let elem of elems) {
    sum += Number(elem.textContent);
  }
  console.log(sum);
});
Задание 8

Енгізу жолдарына сандар енгізіледі. Түймешені басқанда консольге енгізу жолдарынан алынған сандардың қосындысы шығуы керек: 

html<input>
<input>
<input>

<button>click</button>
javascriptlet button = document.querySelector('button');
let elems  = document.querySelectorAll('input');

button.addEventListener('click', function() {
  let sum = 0;
  for (let elem of elems) {
    sum += Number(elem.value);
  }
  console.log(sum);
});
Задание 9

Алғашқы екі енгізу жолына сандар енгізіледі. Түймешені басқанда үшінші енгізу жолына осы сандардың қосындысы шығуы керек: 

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.value = Number(inp1.value) + Number(inp2.value);
});
Задание 10

Алғашқы екі енгізу жолына сандар енгізіледі. Түймешені басқанда абзацқа осы сандардың қосындысы шығуы керек: 

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');

btn.addEventListener('click', function() {
  res.textContent = Number(inp1.value) + Number(inp2.value);
});
Задание 11

Түймешені басқанда әрбір енгізу жолындағы мәтіннің оның data атрибутының мәтінімен сәйкес келетінін тексеру керек: 

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('#btn')

button.addEventListener('click',function() {
  for (let input of inputs) {
    if (input.value === input.dataset.text) {
      input.classList.add('right')
    } else {
      input.classList.add('wrong')
    }
  }
});
Задание 12

Түймешені басқанда әрбір енгізу жолындағы мәтіннің массивтің сәйкес элементінің мәтінімен сәйкес келетінін тексеру керек: 

html<input>
<input>
<input>

<button id="btn">click</button>
javascriptlet inputs = document.querySelectorAll('input')
let button = document.querySelector('#btn')

let texts = [
  'text1',
  'text2',
  'text3',
];

button.addEventListener('click',function() {
  for (let i = 0; i < inputs.length; i++) {
    if (inputs[i].value === texts[i]) {
      inputs[i].classList.add('right')
    } else {
      inputs[i].classList.add('wrong')
    }
  }
});
Задание 13

Енгізу жолдарына сандар енгізіледі. Түймешені басқанда консольге енгізілген сандардың қосындысы шығуы керек: 

html<input>
<input>
<input>

<button id="btn">click</button>
javascriptlet inputs = document.querySelectorAll('input');
let btn = document.querySelector('#btn');

btn.addEventListener('click', function() {
  let sum = 0;
  for (let input of inputs) {
    sum += Number(input.value);
  }
  console.log(sum);
});
Задание 14

Алғашқы екі енгізу жолына сандар енгізіледі. Түймешені басқанда үшінші енгізу жолына осы сандардың қосындысы шығуы керек: 

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.value = Number(inp1.value) + Number(inp2.value);
});
Задание 15

Енгізу жолына сан енгізіледі. Фокус жоғалтқан кезде консольге осы санның цифрларының қосындысы шығуы керек: 

html<input id="inp">
javascriptlet inp = document.querySelector('#inp');

inp.addEventListener('blur', function() {
  let digits = this.value.split('').map(Number);
  let sum = 0;
  
  for (let digit of digits) {
    sum += digit;
  }
  
  console.log(sum);
});
BackDOM мысалында JavaScript код жазу бойынша кеңестерNextDOM бойынша жұмысты меңгеруді жаттығу