Fehlersuche im DOM-Code in JavaScript
In den folgenden Aufgaben hat ein Programmierer Code geschrieben und möglicherweise Fehler gemacht. Sie müssen überprüfen, ob der Code das tut, was beschrieben ist. Wenn der Code fehlerhaft arbeitet, müssen Sie die Fehler korrigieren.
Der Code soll Text am Ende jedes Absatzes hinzufügen:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelector('p');
elems.textContent += '!';
Bei Klick auf einen Absatz soll sein Wert um eins erhöht werden:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', function() {
this.textContent += Number(1);
});
}
Bei Klick auf den Button soll der Text des Absatzes fett gedruckt werden:
<p>text</p>
<button>click</button>
let button = document.querySelector('button');
let elem = document.querySelector('p');
button.addEventListener('click', function() {
elem.innerHTML = '<b>elem.innerHTML</b>';
});
Bei Klick auf den Button soll die Summe der Zahlen aus den Absätzen ausgegeben werden:
<p>1</p>
<p>2</p>
<p>3</p>
<button>click</button>
let 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);
});
Bei Klick auf einen Absatz soll ihm am Ende ein bestimmter Text hinzugefügt werden:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', () => {
this.textContent += '!';
});
}
Bei Klick auf den Button soll der Text jedes Absatzes fett gedruckt werden:
<p>text1</p>
<p>text2</p>
<p>text3</p>
<button>click</button>
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
button.addEventListener('click', function() {
for (let elem of elems) {
elem.innerHTML = '<b>+elem.innerHTML+</b>';
}
});
Bei Klick auf den Button soll in der Konsole die Summe der Zahlen aus den Absätzen ausgegeben werden:
<p>1</p>
<p>2</p>
<p>3</p>
<button>click</button>
let 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);
});
}
In die Inputs werden Zahlen eingegeben. Bei Klick auf den Button soll in der Konsole die Summe der Zahlen aus den Inputs ausgegeben werden:
<input>
<input>
<input>
<button>click</button>
let 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);
});
In die ersten zwei Inputs werden Zahlen eingegeben. Bei Klick auf den Button soll im dritten Input die Summe dieser Zahlen ausgegeben werden:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">click</button>
let 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;
});
In die ersten zwei Inputs werden Zahlen eingegeben. Bei Klick auf den Button soll im Absatz die Summe dieser Zahlen ausgegeben werden:
<input id="inp1">
<input id="inp2">
<p id="res"></p>
<button id="btn">click</button>
let 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;
});
Bei Klick auf den Button muss überprüft werden, ob der Text in jedem Input mit dem Text seines data-Attributs übereinstimmt:
<input data-text="text1">
<input data-text="text2">
<input data-text="text3">
<button id="btn">click</button>
let 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')
}
}
});
Bei Klick auf den Button muss überprüft werden, ob der Text in jedem Input mit dem Text des entsprechenden Elements des Arrays übereinstimmt:
<input>
<input>
<input>
<button id="btn">click</button>
let 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')
}
}
}
});
In die Inputs werden Zahlen eingegeben. Bei Klick auf den Button soll in der Konsole die Summe der eingegebenen Zahlen ausgegeben werden:
<input>
<input>
<input>
<button id="btn">click</button>
let 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);
});
In die ersten zwei Inputs werden Zahlen eingegeben. Bei Klick auf den Button soll im dritten Input die Summe dieser Zahlen ausgegeben werden:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">click</button>
let 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;
});
In das Input wird eine Zahl eingegeben. Beim Verlust des Fokus soll in der Konsole die Summe der Ziffern dieser Zahl ausgegeben werden:
<input id="inp">
let 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);
});
