DOM менен JavaScriptтеги коддо каталарды издөө

Төмөнкү маселелерде белгилүү бир программист код жазган жана, мүмкүн, анда каталар жасан. Сиз текшеришиңиз керек, код сипатталганды аткарабы же жокпу. Эгер код туура эмес иштесе, сиз каталарды оңдошуңуз керек.

Задание 1

Код ар бир абзацтын аягына текст кошууга тийиш:

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

javascriptlet elems = document.querySelector('p');
elems.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(1);
  });
}

Задание 3

Баскычты чыкылдаганда абзацтын тексти жуан болушу керек:

html<p>текст</p>
<button>чыкылда</button>

javascriptlet button = document.querySelector('button');
let elem   = document.querySelector('p');

button.addEventListener('click', function() {
  elem.innerHTML = '<b>elem.innerHTML</b>';
});

Задание 4

Баскычты чыкылдаганда абзацтардагы сандардын суммасы чыгышы керек:

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

<button>чыкылда</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

Абзацты чыкылдаганда ага берилген текст кошулушу керек:

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

Баскычты чыкылдаганда ар бир абзацтын тексти жуан болушу керек:

html<p>текст1</p>
<p>текст2</p>
<p>текст3</p>
<button>чыкылда</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

Баскычты чыкылдаганда консолго абзацтардагы сандардын суммасы чыгышы керек:

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

<button>чыкылда</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

Инпуттарга сандар киргизилет. Баскычты чыкылдаганда консолго инпуттардагы сандардын суммасы чыгышы керек:

html<input>
<input>
<input>

<button>чыкылда</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

Биринчи эки инпутка сандар киргизилет. Баскычты чыкылдаганда үчүнчү инпутка ушул сандардын суммасы чыгышы керек:

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

<button id="btn">чыкылда</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

Биринчи эки инпутка сандар киргизилет. Баскычты чыкылдаганда абзацка ушул сандардын суммасы чыгышы керек:

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

<button id="btn">чыкылда</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

Баскычты чыкылдаганда текшерилиши керек, ар бир инпуттагы текст анын data атрибутунун текстине дал келеби:

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

<button id="btn">чыкылда</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

Баскычты чыкылдаганда текшерилиши керек, ар бир инпуттагы текст массивдин тиешелүү элементинин текстине дал келеби:

html<input>
<input>
<input>

<button id="btn">чыкылда</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

Инпуттарга сандар киргизилет. Баскычты чыкылдаганда консолго киргизилген сандардын суммасы чыгышы керек:

html<input>
<input>
<input>

<button id="btn">чыкылда</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

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

<button id="btn">чыкылда</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

Инпутка сан киргизилет. Фокус жоготкондо консолго ушул сандын цифраларынын суммасы чыгышы керек:

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