Soek Foute in Kode met DOM in JavaScript

In die volgende take het 'n programmeur kode geskryf en moontlik foute daarin gemaak. Jy moet kontroleer of die kode doen wat beskryf word. As die kode onvanpas werk, moet jy die foute regmaak.

Задание 1

Die kode moet teks aan die einde van elke paragraaf byvoeg:

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

javascriptlet elems = document.querySelector('p');
elems.textContent += '!';

Задание 2

Met 'n klik op 'n paragraaf moet sy waarde met een verhoog word:

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

Met 'n klik op die knoppie moet die paragraafteks vet word:

html<p>teks</p>
<button>kliek</button>

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

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

Задание 4

Met 'n klik op die knoppie moet die som van die getalle uit die paragrawe vertoon word:

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

<button>kliek</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(som);
});

Задание 5

Met 'n klik op 'n paragraaf moet 'n gegewe teks aan sy einde bygevoeg word:

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

Met 'n klik op die knoppie moet die teks van elke paragraaf vet word:

html<p>teks1</p>
<p>teks2</p>
<p>teks3</p>
<button>kliek</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

Met 'n klik op die knoppie moet die som van die getalle uit die paragrawe in die konsole verskyn:

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

<button>kliek</button>

javascriptlet button = document.querySelector('button');
let elems  = document.querySelectorAll('p');
let som = 0;

for (let elem of elems) {
  som = elem.textContent + 1;
  
  button.addEventListener('click', function() {
    console.log(som);
  });
}

Задание 8

Getalle word in die invoervelde ingevoer. Met 'n klik op die knoppie moet die som van die getalle uit die invoervelde in die konsole verskyn:

html<input>
<input>
<input>

<button>kliek</button>

javascriptlet button = document.querySelector('button');
let elems  = document.querySelectorAll('input');
let som = 0;

for (let elem of elems) {
  som += elem.value;
}

button.addEventListener('click', function() {
  console.log(som);
});

Задание 9

Getalle word in die eerste twee invoervelde ingevoer. Met 'n klik op die knoppie moet die som van hierdie getalle in die derde invoerveld verskyn:

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

<button id="btn">kliek</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

Getalle word in die eerste twee invoervelde ingevoer. Met 'n klik op die knoppie moet die som van hierdie getalle in die paragraaf verskyn:

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

<button id="btn">kliek</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

Met 'n klik op die knoppie moet gekontroleer word of die teks in elke invoerveld ooreenstem met die teks van sy data-kenmerk:

html<input data-text="teks1">
<input data-text="teks2">
<input data-text="teks3">

<button id="btn">kliek</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('reg')
    } else {
      input.classList.add('verkeerd')
    }
  }
});

Задание 12

Met 'n klik op die knoppie moet gekontroleer word of die teks in elke invoerveld ooreenstem met die teks van die ooreenstemmende element van die skikking:

html<input>
<input>
<input>

<button id="btn">kliek</button>

javascriptlet inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')

let tekste = [
  'teks1',
  'teks2',
  'teks3',
];

button.addEventListener('click',function() {
  for (let input of inputs) {
    for (let teks of tekste) {
      if (input.value === teks) {
        input.classList.add('reg')
      } else {
        input.classList.add('verkeerd')
      }
    }
  }
});

Задание 13

Getalle word in die invoervelde ingevoer. Met 'n klik op die knoppie moet die som van die ingevoerde getalle in die konsole verskyn:

html<input>
<input>
<input>

<button id="btn">kliek</button>

javascriptlet inputs = document.querySelectorAll('inputs');
let btn = document.querySelector('#btm');
let som = 0;

btn.addEventListener('click', function() {
  for (let input of inputs) {
    som += Number(input);
  }
  
  console.log(som);
});

Задание 14

Getalle word in die eerste twee invoervelde ingevoer. Met 'n klik op die knoppie moet die som van hierdie getalle in die derde invoerveld verskyn:

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

<button id="btn">kliek</button>

javascriptlet btn  = document.querySelector('#btn');
let inp1 = document.querySelector('#inp1');
let inp2 = document.querySelector('#inp2');
let inp3 = document.querySelector('#inp3');

let som  = inp1.value + inp2.value;

btn.addEventListener('click', function() {
  inp3.value = som;
});

Задание 15

'n Getal word in die invoerveld ingevoer. Met verlies van fokus moet die som van die syfers van hierdie getal in die konsole verskyn:

html<input id="inp">

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

inp.addEventListener('blur', function() {
  let syfers = +inp.split('');
  let som = 0;
  
  for (let syfer of syfers) {
    som += syfer;
  }
  
  console.log(som);
});