JavaScript හි DOM සමග කේතයේ දෝෂ සෙවීම

Задание 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>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

බොත්තම මත ක්ලික් කිරීමෙන් ඡේදවල ඇති සංඛ්‍යාවල එකතුව පෙන්විය යුතුය:

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

ඡේදය මත ක්ලික් කිරීමෙන් එහි අවසානයට දී ඇති පෙළ එකතු කළ යුතුය:

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>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

බොත්තම මත ක්ලික් කිරීමෙන් කොන්සෝලයේ ඡේදවල ඇති සංඛ්‍යාවල එකතුව පෙන්විය යුතුය:

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

ආදාන කොටුවලට සංඛ්‍යා ඇතුළු කරනු ලැබේ. බොත්තම මත ක්ලික් කිරීමෙන් කොන්සෝලයේ ආදාන කොටු වලින් ලැබෙන සංඛ්‍යාවල එකතුව පෙන්විය යුතුය:

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

පළමු ආදාන කොටු දෙකට සංඛ්‍යා ඇතුළු කරනු ලැබේ. බොත්තම මත ක්ලික් කිරීමෙන් තුන්වන ආදාන කොටුවට මෙම සංඛ්‍යාවල එකතුව පෙන්විය යුතුය:

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

පළමු ආදාන කොටු දෙකට සංඛ්‍යා ඇතුළු කරනු ලැබේ. බොත්තම මත ක්ලික් කිරීමෙන් ඡේදයට මෙම සංඛ්‍යාවල එකතුව පෙන්විය යුතුය:

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

බොත්තම මත ක්ලික් කිරීමෙන් පරීක්ෂා කළ යුතුය, එක් එක් ආදාන කොටුවේ පෙළ එහි 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('#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">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

ආදාන කොටු වලට සංඛ්‍යා ඇතුළු කරනු ලැබේ. බොත්තම මත ක්ලික් කිරීමෙන් කොන්සෝලයේ ඇතුළු කරන ලද සංඛ්‍යාවල එකතුව පෙන්විය යුතුය:

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

පළමු ආදාන කොටු දෙකට සංඛ්‍යා ඇතුළු කරනු ලැබේ. බොත්තම මත ක්ලික් කිරීමෙන් තුන්වන ආදාන කොටුවට මෙම සංඛ්‍යාවල එකතුව පෙන්විය යුතුය:

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

ආදාන කොටුවට සංඛ්‍යාවක් ඇතුළු කරනු ලැබේ. දර්ශනය අහිමි වීම මත කොන්සෝලයේ මෙම සංඛ්‍යාවේ ඉලක්කම්වල එකතුව පෙන්විය යුතුය:

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