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() {
  let sum  = Number(inp1.value) + Number(inp2.value);
  inp3.value = sum;
});

Задание 15

Инпутга сон киритилади. Фокус йўқотилганда консольга ушбу соннинг рақамлари йиғиндиси чиқарилиши керак:

html<input id="inp">

javascriptlet inp = document.querySelector('#inp');

inp.addEventListener('blur', function() {
  let digits = this.value.split('');
  let sum = 0;
  
  for (let digit of digits) {
    sum += Number(digit);
  }
  
  console.log(sum);
});