Associate the same event with a created element.

Question

Associate the same event with a created element.

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (-1 votes)

0

I have the following problem: I have a form that has 4 inputs, two of them are for writing, and the other two are two buttons, one button is "+" and the other "-". The objective is that pressing the "+" button creates another 4 inputs, and if the "-" button is given, those 4 inputs will be eliminated.

So far I have only been able to paint the inputs from the first div I have, the buttons that are created have no function. I need to associate the first event and that the elements that it creates, use that same event. I need to do it only in javaScript, even though I have looked at it I can not find the solution, I would appreciate it very much

I show you what I have:

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Práctica a Entregar</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="1.js"></script>
    <link rel="stylesheet" type="text/css" href="practica1.css">
</head>
<body>
    <h1>Solicitud de empleo</h1>
    <div id="contenedor">       
        <form name="prueba" action="#" id="formulario">
            <p>Formacion:</p>
            <div class="test" id="primero">
                <input type="text" id="year" size="2">
                <input type="text" id="curso" size="50">
                <input type="button" id="menos" value="-">
                <input type="button" id="mas" value="+">
            </div>
    </form>
    </div>
</body>
</html>

File js:

document.addEventListener("DOMContentLoaded",main);
function main(){
function anadirCaja(){
        var divPrimero = document.getElementById("primero");
        var divResto = document.createElement("DIV");
        divPrimero.append(divResto);
        divResto.setAttribute("class", "test");
        divResto.setAttribute("id", "primero");         
        var inputAnno = document.createElement("input");
        var inputCurso = document.createElement("input");
        var inputBotonMenos = document.createElement("input");
        var inputBotonMas = document.createElement("input");
        inputAnno.setAttribute("type","text");
        inputAnno.setAttribute("id","year");
        inputAnno.setAttribute("size","2");
        inputCurso.setAttribute("type","text");
        inputCurso.setAttribute("id","curso");
        inputCurso.setAttribute("size","50");
        inputBotonMenos.setAttribute("type","button");
        inputBotonMenos.setAttribute("id","menos");
        inputBotonMenos.setAttribute("value","-");
        inputBotonMas.setAttribute("type","button");
        inputBotonMas.setAttribute("id","mas");
        inputBotonMas.setAttribute("value","+");
        divResto.append(inputAnno);
        divResto.append(inputCurso);
        divResto.append(inputBotonMenos);
        divResto.append(inputBotonMas);


    }

    var mas = document.getElementById("mas");
    mas.addEventListener("click",anadirCaja);
    var menos = document.getElementById("menos");
    menos.addEventListener("click",quitarCaja);
}

javascript

asked by Sonia 09.11.2017 в 23:26

source

4 answers

0

try this, what you have got into a for and the removal of boxes was made with the child

document.addEventListener("DOMContentLoaded",main());
function main(){
    var mas = document.getElementById("mas");
    mas.addEventListener("click",anadirCaja);
    var menos = document.getElementById("menos");
    menos.addEventListener("click", eliminarCaja)

}

function anadirCaja(){
    for(var i = 0; i < 4; i++){
        var divPrimero = document.getElementById("primero");
        var divResto = document.createElement("DIV");
        divPrimero.append(divResto);
        divResto.setAttribute("class", "test");
        divResto.setAttribute("id", "primero");         
        var inputAnno = document.createElement("input");
        var inputCurso = document.createElement("input");
        var inputBotonMenos = document.createElement("input");
        var inputBotonMas = document.createElement("input");
        inputAnno.setAttribute("type","text");
        inputAnno.setAttribute("id","year");
        inputAnno.setAttribute("size","2");
        inputCurso.setAttribute("type","text");
        inputCurso.setAttribute("id","curso");
        inputCurso.setAttribute("size","50");
        inputBotonMenos.setAttribute("type","button");
        inputBotonMenos.setAttribute("id","menos");
        inputBotonMenos.setAttribute("value","-");
        inputBotonMas.setAttribute("type","button");
        inputBotonMas.setAttribute("id","mas");
        inputBotonMas.setAttribute("value","+");
        divResto.append(inputAnno);
        divResto.append(inputCurso);
        divResto.append(inputBotonMenos);
        divResto.append(inputBotonMas);
    }
}

function eliminarCaja() {
    var padre = document.getElementById("primero");
  for(var i = 0; i < 4; i++){
    padre.removeChild(padre.lastChild);
   }
}

answered by 10.11.2017 в 00:41

0

Use cloneNode of javascript to add elements and if you want to delete them use removeChild .

function main(){

    function anadirCaja(){
        var clon = document.getElementById('primero').cloneNode(true);
        var padre = document.getElementById("formulario");
        padre.appendChild(clon);
    }

    function quitarCaja(){
        var padre = document.getElementById("formulario");
        padre.removeChild(padre.lastChild);
    }

    document.getElementById("mas").addEventListener("click", anadirCaja);
    document.getElementById("menos").addEventListener("click", quitarCaja);
}

answered by 10.11.2017 в 00:31

-1

I recommend you use jquery, it makes things easier for you. What you need you can do as follows:

$('#ID1, #ID2').on('click', function(){ 
   ///TODO: Hacer algo
});

That function is executed when you click on the objects with those ID's.

Greetings.

answered by 10.11.2017 в 00:03

Why can not I see the layouts on android? problem in class with bootstrap collapse 4 with form

score 1 · Accepted Answer

This is what you are looking for:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Práctica a Entregar</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="1.js"></script>
    <link rel="stylesheet" type="text/css" href="practica1.css">
</head>
<body>
    <h1>Solicitud de empleo</h1>
    <div id="contenedor">       
        <form name="prueba" action="#" id="formulario">
            <p>Formacion:</p>
            <div class="test" id="primero">
                <input type="text" id="year" size="2">
                <input type="text" id="curso" size="50">
                <input type="button" id="menos" value="-">
                <input type="button" id="mas" value="+">
            </div>
    </form>
    </div>
</body>
</html>

In your file js put this:

var contador = 1;

document.addEventListener("DOMContentLoaded",main);
function main(){
    function anadirCaja(){
        var divPrimero = document.getElementById("primero");
        var divResto = document.createElement("DIV");
        divPrimero.append(divResto);
        divResto.setAttribute("class", "test");
        divResto.setAttribute("id", "primero"+contador);         
        var inputAnno = document.createElement("input");
        var inputCurso = document.createElement("input");
        var inputBotonMenos = document.createElement("input");
        var inputBotonMas = document.createElement("input");
        inputAnno.setAttribute("type","text");
        inputAnno.setAttribute("id","year");
        inputAnno.setAttribute("size","2");
        inputCurso.setAttribute("type","text");
        inputCurso.setAttribute("id","curso");
        inputCurso.setAttribute("size","50");
        inputBotonMenos.setAttribute("type","button");
        inputBotonMenos.setAttribute("id","menos"+contador);
        inputBotonMenos.setAttribute("value","-");
        inputBotonMas.setAttribute("type","button");
        inputBotonMas.setAttribute("id","mas"+contador);
        inputBotonMas.setAttribute("value","+");
        inputBotonMas.addEventListener("click", anadirCaja);
        inputBotonMenos.addEventListener("click",quitarCaja);
        divResto.append(inputAnno);
        divResto.append(inputCurso);
        divResto.append(inputBotonMenos);
        divResto.append(inputBotonMas);
        contador++;

    }

    function quitarCaja(e){

        var evento = e.target;  
        var identificador = evento.id;  
        identificador = identificador.replace("menos", "primero");
        var caja = document.getElementById(identificador);

        document.getElementById("primero").removeChild(caja);
    }

    var mas = document.getElementById("mas");
    mas.addEventListener("click",anadirCaja);
    var menos = document.getElementById("menos"+contador);
    menos.addEventListener("click",quitarCaja);
}