Recherche d'erreurs dans le code avec le DOM en JavaScript
Dans les tâches suivantes, un certain programmeur a écrit du code et a peut-être fait des erreurs. Vous devez vérifier si le code fait ce qui est décrit. Si le code fonctionne incorrectement, vous devez corriger les erreurs.
Le code doit ajouter du texte à la fin de chaque paragraphe :
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelector('p');
elems.textContent += '!';
Lors d'un clic sur un paragraphe, sa valeur doit augmenter de un :
<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);
});
}
Lors d'un clic sur le bouton, le texte du paragraphe doit devenir gras :
<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>';
});
Lors d'un clic sur le bouton, la somme des nombres des paragraphes doit être affichée :
<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);
});
Lors d'un clic sur un paragraphe, le texte spécifié doit lui être ajouté à la fin :
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', () => {
this.textContent += '!';
});
}
Lors d'un clic sur le bouton, le texte de chaque paragraphe doit devenir gras :
<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>';
}
});
Lors d'un clic sur le bouton, la somme des nombres des paragraphes doit être affichée dans la console :
<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);
});
}
Des nombres sont saisis dans les inputs. Lors d'un clic sur le bouton, la somme des nombres des inputs doit être affichée dans la console :
<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);
});
Des nombres sont saisis dans les deux premiers inputs. Lors d'un clic sur le bouton, la somme de ces nombres doit être affichée dans le troisième input :
<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;
});
Des nombres sont saisis dans les deux premiers inputs. Lors d'un clic sur le bouton, la somme de ces nombres doit être affichée dans le paragraphe :
<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;
});
Lors d'un clic sur le bouton, il faut vérifier que le texte dans chaque input correspond au texte de son attribut data :
<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')
}
}
});
Lors d'un clic sur le bouton, il faut vérifier que le texte dans chaque input correspond au texte de l'élément correspondant du tableau :
<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')
}
}
}
});
Des nombres sont saisis dans les inputs. Lors d'un clic sur le bouton, la somme des nombres saisis doit être affichée dans la console :
<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);
});
Des nombres sont saisis dans les deux premiers inputs. Lors d'un clic sur le bouton, la somme de ces nombres doit être affichée dans le troisième input :
<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;
});
Un nombre est saisi dans l'input. Lors de la perte de focus, la somme des chiffres de ce nombre doit être affichée dans la console :
<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);
});
