DOM ilə JavaScript kodunda səhvlərin axtarışı
Aşağıdakı tapşırıqlarda müəyyən proqramçı kod yazmışdır və ola bilsin ki, orada səhvlərə yol vermişdir. Siz yoxlamalısınız ki, kod təsvir olunanı edirmi? Əgər kod düzgün işləmirsə, siz səhvləri düzəltməlisiniz.
Kod hər bir abzasın sonuna mətn əlavə etməlidir:
html<p>1</p>
<p>2</p>
<p>3</p>javascriptlet elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.textContent += '!';
}
Abzasa klik edildikdə onun dəyəri bir vahid artmalıdır:
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;
});
}
Düyməyə klik edildikdə abzasın mətni qalın olmalıdır:
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>';
});
Düyməyə klik edildikdə abzaslardakı rəqəmlərin cəmi çap edilməlidir:
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);
});
Abzasa klik edildikdə ona sonunda müəyyən edilmiş mətn əlavə edilməlidir:
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 += '!';
});
}
Düyməyə klik edildikdə hər bir abzasın mətni qalın olmalıdır:
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>';
}
});
Düyməyə klik edildikdə konsola abzaslardakı rəqəmlərin cəmi çap edilməlidir:
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);
});
Inputlara rəqəmlər daxil edilir. Düyməyə klik edildikdə konsola inputlardakı rəqəmlərin cəmi çap edilməlidir:
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);
});
İlk iki inputa rəqəmlər daxil edilir. Düyməyə klik edildikdə üçüncü inputa bu rəqəmlərin cəmi çap edilməlidir:
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);
});
İlk iki inputa rəqəmlər daxil edilir. Düyməyə klik edildikdə abzasa bu rəqəmlərin cəmi çap edilməlidir:
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);
});
Düyməyə klik edildikdə yoxlanılmalıdır ki, hər bir inputdakı mətn onun data atributu ilə üst-üstə düşürmü:
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')
}
}
});
Düyməyə klik edildikdə yoxlanılmalıdır ki, hər bir inputdakı mətn massivin müvafiq elementi ilə üst-üstə düşürmü:
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')
}
}
});
Inputlara rəqəmlər daxil edilir. Düyməyə klik edildikdə konsola daxil edilmiş rəqəmlərin cəmi çap edilməlidir:
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);
});
İlk iki inputa rəqəmlər daxil edilir. Düyməyə klik edildikdə üçüncü inputa bu rəqəmlərin cəmi çap edilməlidir:
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;
});
Inputa rəqəm daxil edilir. Fokus itirildikdə konsola bu rəqəmin rəqəmlərinin cəmi çap edilməlidir:
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);
});