0

La idea es que me añada según el número de veces pero me da error en innerHTML, haber si me pueden echar un cablecillo, sería añadir si tiene valor 2 dos nombres, pero sin tener que parsearlo a int gracias !

// Declaro la variable contador

let contador = 1;

const valor = document.querySelector('#span');
const botones = document.querySelectorAll('.boton');

botones.forEach(boton => {
boton.addEventListener('click', function (e) {
    const estilos = e.currentTarget.classList;

    if (estilos.contains('disminuir')) {
        if (contador > 1) {
            contador--;
        }
    }

    else if (estilos.contains('aumentar')) {
        contador++;
    }
    else {
        contador = 1;
    }

    valor.textContent = contador;
})
})

// Función para validar que se introduzcan más de 10 caracteres.
function validarTexto() {
var cadena = document.getElementById("texto").value;
if (cadena.length < 10) {
    return false;
} else {
    return true;
}
}
// Listener para el botón de "Introducir", que primero validará el texto y luego ejecutará su función, creando un p y un botón.
document.getElementById("btn3").addEventListener("click", function() {
if (validarTexto() == false) {
    alert("El nombre introducido contiene menos de 10 caracteres");
} else {
    var num_veces = document.getElementById("span").innerText;
    for (i = 0; i < num_veces; i++) {
        var parr = document.createElement("p");
        var txt = document.createElement("span");
        txt.textContent = document.getElementById("texto").value;
        var img = document.createElement("img");
        img.setAttribute("src", "./img/eliminar.png")
        document.getElementById("div4").appendChild(parr);
        parr.appendChild(txt);
        parr.appendChild(img);
        img.addEventListener("click", function() {
            this.parentNode.removeChild(this.parentNode.childNodes[0]);
            this.parentNode.removeChild(this.parentNode.childNodes[0]);
        });
    }
}
});
.container{
    display: block;
    height: 50vh;
    color:black;
    margin-top: 150px;
    text-align: center;
}

span{
    font-size: 3em;
}
button{
    border-radius: 10px;
    border:none;
    cursor:pointer;
    padding: 10px;
    margin:10px;
}
input{
    padding: 10px;
    border-radius: 10px;
}

#nombre{
    margin-top: 30px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="custom.css">
<title>Ejercicio-1</title>
</head>
<body>
<div class="container">
    <h1>Ejercicio-1</h1>
    <br>
    <button id="btn1" class="boton disminuir"><</button>
    <span id="span" >1</span>
    <button id="btn2" class="boton aumentar">></button>
    <br>
    <input type="text" id="texto" placeholder="Introduzca nombre" />
    <button id="btn3" class="boton introducir">Introducir</button>
</div>

<div id="div4"></div>
<script src="contador.js"></script>
</body>
</html>

3
  • 2
    Es porque en esta linea tienes document.getElementById("span") y en el HTML no tienes ningun ID llamado span se llama valor
    – Jorge Luis
    Commented el 27 abr. 2021 a las 20:09
  • ops lo pase por alto gracias @Jorge Luis ahora si funciona ! un saludo Commented el 27 abr. 2021 a las 20:26
  • vale ahora lo que no me añade es el texto el numero de veces si son 2, 2 veces el texto y se pone a valor 1 haber si lo arreglo Commented el 27 abr. 2021 a las 20:33

1 respuesta 1

1

Aquel else al presionar el botón siempre iba a declarar el valor del span en 1, he quitado el else y deje que el default 1 quedara al finalizar el script

else {
    contador = 1;
}

// Declaro la variable contador

let contador = 1;

const valor = document.querySelector('#span');
const botones = document.querySelectorAll('.boton');

botones.forEach(boton => {
boton.addEventListener('click', function (e) {
    const estilos = e.currentTarget.classList;

    if (estilos.contains('disminuir')) {
        if (contador > 1) {
            contador--;
        }
    }

    else if (estilos.contains('aumentar')) {
        contador++;
    }
    //SE ELIMINO EL ESLE
    valor.textContent = contador;
})
})

// Función para validar que se introduzcan más de 10 caracteres.
function validarTexto() {
var cadena = document.getElementById("texto").value;
if (cadena.length < 10) {
    return false;
} else {
    return true;
}
}
// Listener para el botón de "Introducir", que primero validará el texto y luego ejecutará su función, creando un p y un botón.
document.getElementById("btn3").addEventListener("click", function() {
if (validarTexto() == false) {
    alert("El nombre introducido contiene menos de 10 caracteres");
} else {
    var num_veces = document.getElementById("span").innerText;
    alert(num_veces);
    for (i = 0; i < num_veces; i++) {
        var parr = document.createElement("p");
        var txt = document.createElement("span");
        txt.textContent = document.getElementById("texto").value;
        var img = document.createElement("img");
        img.setAttribute("src", "./img/eliminar.png")
        document.getElementById("div4").appendChild(parr);
        parr.appendChild(txt);
        parr.appendChild(img);
        img.addEventListener("click", function() {
            this.parentNode.removeChild(this.parentNode.childNodes[0]);
            this.parentNode.removeChild(this.parentNode.childNodes[0]);
        });
        //UNA VEZ FINALIZADO QUEDA EN DEFAULT 1 (COMO EL ELSE ELIMINADO)
        document.querySelector('#span').textContent = 1;
    }
}
});
.container{
    display: block;
    height: 50vh;
    color:black;
    margin-top: 150px;
    text-align: center;
}

span{
    font-size: 3em;
}
button{
    border-radius: 10px;
    border:none;
    cursor:pointer;
    padding: 10px;
    margin:10px;
}
input{
    padding: 10px;
    border-radius: 10px;
}

#nombre{
    margin-top: 30px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="custom.css">
<title>Ejercicio-1</title>
</head>
<body>
<div class="container">
    <h1>Ejercicio-1</h1>
    <br>
    <button id="btn1" class="boton disminuir"><</button>
    <span id="span" >1</span>
    <button id="btn2" class="boton aumentar">></button>
    <br>
    <input type="text" id="texto" placeholder="Introduzca nombre" />
    <button id="btn3" class="boton introducir">Introducir</button>
</div>

<div id="div4"></div>
<script src="contador.js"></script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.