Búsqueda de errores en código con DOM en JavaScript
En las siguientes tareas, algún programador escribió código y posiblemente cometió errores. Debes verificar si el código hace lo que se describe. Si el código funciona incorrectamente, debes corregir los errores.
El código debe agregar texto al final de cada párrafo:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelector('p');
elems.textContent += '!';
Al hacer clic en un párrafo, su valor debe aumentar en uno:
<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);
});
}
Al hacer clic en el botón, el texto del párrafo debe ponerse en negrita:
<p>texto</p>
<button>hacer clic</button>
let button = document.querySelector('button');
let elem = document.querySelector('p');
button.addEventListener('click', function() {
elem.innerHTML = '<b>elem.innerHTML</b>';
});
Al hacer clic en el botón, debe mostrarse la suma de los números de los párrafos:
<p>1</p>
<p>2</p>
<p>3</p>
<button>hacer clic</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);
});
Al hacer clic en un párrafo, se le debe agregar el texto especificado al final:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', () => {
this.textContent += '!';
});
}
Al hacer clic en el botón, el texto de cada párrafo debe ponerse en negrita:
<p>texto1</p>
<p>texto2</p>
<p>texto3</p>
<button>hacer clic</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>';
}
});
Al hacer clic en el botón, en la consola debe mostrarse la suma de los números de los párrafos:
<p>1</p>
<p>2</p>
<p>3</p>
<button>hacer clic</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);
});
}
Se ingresan números en los inputs. Al hacer clic en el botón, en la consola debe mostrarse la suma de los números de los inputs:
<input>
<input>
<input>
<button>hacer clic</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);
});
Se ingresan números en los primeros dos inputs. Al hacer clic en el botón, en el tercer input debe mostrarse la suma de estos números:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">hacer clic</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;
});
Se ingresan números en los primeros dos inputs. Al hacer clic en el botón, en el párrafo debe mostrarse la suma de estos números:
<input id="inp1">
<input id="inp2">
<p id="res"></p>
<button id="btn">hacer clic</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;
});
Al hacer clic en el botón, debe verificarse que el texto en cada input coincida con el texto de su atributo data:
<input data-text="text1">
<input data-text="text2">
<input data-text="text3">
<button id="btn">hacer clic</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')
}
}
});
Al hacer clic en el botón, debe verificarse que el texto en cada input coincida con el texto del elemento correspondiente del array:
<input>
<input>
<input>
<button id="btn">hacer clic</button>
let inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')
let texts = [
'texto1',
'texto2',
'texto3',
];
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')
}
}
}
});
Se ingresan números en los inputs. Al hacer clic en el botón, en la consola debe mostrarse la suma de los números ingresados:
<input>
<input>
<input>
<button id="btn">hacer clic</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);
});
Se ingresan números en los primeros dos inputs. Al hacer clic en el botón, en el tercer input debe mostrarse la suma de estos números:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">hacer clic</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;
});
Se ingresa un número en el input. Al perder el foco, en la consola debe mostrarse la suma de los dígitos de este número:
<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);
});
