Iskanje napak v kodi z DOM v JavaScript
V naslednjih nalogah je neki programer napisal kodo in morda naredil napake. Preveriti morate, ali koda deluje, kot je opisano. Če koda ne deluje pravilno, morate napake popraviti.
Koda bi morala dodati tekst na konec vsakega odstavka:
html<p>1</p>
<p>2</p>
<p>3</p>javascriptlet elems = document.querySelector('p');
elems.textContent += '!';
Ob kliku na odstavek naj se njegova vrednost poveča za ena:
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);
});
}
Ob kliku na gumb naj tekst odstavka postane krepak:
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>';
});
Ob kliku na gumb naj se izpiše vsota števil iz odstavkov:
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);
});
Ob kliku na odstavek naj se mu na konec doda določen tekst:
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 += '!';
});
}
Ob kliku na gumb naj tekst vsakega odstavka postane krepak:
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>';
}
});
Ob kliku na gumb naj se v konzolo izpiše vsota števil iz odstavkov:
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);
});
}
V vnosna polja se vnesejo števila. Ob kliku na gumb se mora v konzolo izpisati vsota števil iz vnosnih polj:
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);
});
V prvi dve vnosni polji se vnesejo števila. Ob kliku na gumb naj se v tretje vnosno polje izpiše vsota teh števil:
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;
});
V prvi dve vnosni polji se vnesejo števila. Ob kliku na gumb naj se v odstavek izpiše vsota teh števil:
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;
});
Ob kliku na gumb je treba preveriti, ali se tekst v vsakem vnosnem polju ujema z tekstom njegovega data atributa:
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')
}
}
});
Ob kliku na gumb je treba preveriti, ali se tekst v vsakem vnosnem polju ujema z tekstom ustreznega elementa tabele:
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')
}
}
}
});
V vnosna polja se vnesejo števila. Ob kliku na gumb naj se v konzolo izpiše vsota vnešenih števil:
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);
});
V prvi dve vnosni polji se vnesejo števila. Ob kliku na gumb naj se v tretje vnosno polje izpiše vsota teh števil:
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;
});
V vnosno polje se vnese število. Ob izgubi fokusa naj se v konzolo izpiše vsota števk tega števila:
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);
});