How to insert a text box at the end of all elements with Javascript (WITHOUT Jquery)?

Question

How to insert a text box at the end of all elements with Javascript (WITHOUT Jquery)?

Navigation

#1 by (0 votes)

1

Good morning , I tried to make a calculator to make purchases but I want to add text boxes every time I need to add a new product my problem is that when I use "innerhtml" to add a box of text is deleted all the values of the previous text boxes that already existed, I know it can be done in JQuery with append but I am curious to know how to do it with Javascript only this is the code I use to add the new text boxes : cajanompro [0] .innerHTML +="" ;. Anyway, I hope you can help me, I thank you in advance to those who can help me.

/*ESTE ES EL CODIGO Q SE SUPONE DEBERIA  AGREGAR LAS CAJAS DE TEXTO */
function Agregaitems(){
		var cajanompro = document.getElementsByClassName('cajasnompro');
		var cajacantidad = document.getElementsByClassName('cajascantidad');
		var cajaprecio = document.getElementsByClassName('cajaprecio');
		var cajaresultado = document.getElementsByClassName('cajaresultado');

		cajanompro[0].innerHTML +="<input type='text' placeholder='Nombre del producto NUEVO' >";
		cajacantidad[0].innerHTML +="<input type='text' placeholder='Cantidad' >";
		cajaprecio[0].innerHTML +="<input type='text' placeholder='Precio' >";
		cajaresultado[0].innerHTML +="<input type='text' placeholder='resultado' >";
	}
  /*----------------------------------------------------*/
  /*ESTA FUNCION ES PARA MULTIPLICAR LA CANTIDA POR EL PRECIO UNITARIO */
	 function Resultado(posi){
		 var precio = document.getElementsByClassName('precio');
		 var cantidad = document.getElementsByClassName('cant');
		  var resultado = document.getElementsByClassName('resultado');
		   cost =  precio[posi].value * cantidad[posi].value;
		 resultado[posi].value=cost;
	 }

.titulos{
  text-align: center;
}
#FrmLista{
  width: 100%;
  margin: 0 auto;
}
label{
  margin: 5px;
  font-size: 150%;

}
#resultado{
    font-size: 250%;
}
.Contecajas{
  width:100%;
	border: solid 1px red;
	display: flex;
}
.cajasnompro,.cajascantidad,.cajaprecio,.cajaresultado{
	max-width: 60%;
	float: left;
}
.cajasnompro{
	width: 60%;
	margin: 2px;
}
.cajascantidad,.cajaprecio,.cajaresultado{
	width: 13%;
	margin: 2px;
}

.cajasnompro input,.cajascantidad input,.cajaprecio input,.cajaresultado input{
	width: 100%;
	height: 30px;
	text-align: center;
}

.controles input{
  background-color: rgb(108, 108, 108);
  padding: 2px;
  height: 50px;
  width: 49.3%;
  border: none;
  font-size: 80%;
  color: rgb(255, 249, 254);
  font-family:'Roboto Condensed', sans-serif;
}
@media screen  and (max-width: 621px){
	.titulos{
  text-align: center;
		font-size: 10px;
}
}

<html>

<body>
<form id="FrmLista">
    <h2 class="titulos">Ingrese los productos que comprará</h2>
    <div  class="Contecajas">
     <div class="cajasnompro">
      <h3 class="titulos">Productos</h3>
      <input type="text" placeholder="Nombre del producto"  >
      <input type="text" placeholder="Nombre del producto"  >
     </div>
     <div class="cajascantidad">
     <h3 class="titulos">cantidad</h3>
      <input type="number" placeholder="Cantidad" class="cant"  >
      <input type="number" placeholder="Cantidad" class="cant"  >
      </div>
      <div class="cajaprecio">
     <h3 class="titulos">Pre Und</h3>
      <input type="number" placeholder=" Precio del producto" class="precio" onkeyup="Resultado(0)" >
      <input type="number" placeholder=" Precio del producto" class="precio" onkeyup="Resultado(1)" >
    </div>
     <div class="cajaresultado">
     <h3 class="titulos">Resultado</h3>
      <input type="number" placeholder=" Resultado" class="resultado"  >
      <input type="number" placeholder=" Resultado" class="resultado"  >
    </div>
	  </div>
    <div class="controles">
 <input type="button" value="CALCULAR" onclick="calcular()">
 <input type="button" value="ABREGAR MAS PRODUCTOS" onclick="Agregaitems()">
 <label>Total :</label><label  id="resultado">0.00</label>
 </div>
  </form>
</body>
</html>

**

javascript html css

asked by Frank Campos Vilchez 26.08.2017 в 02:20

source

1 answer

Work with lists without known columns Many-to-many relationship in laravel 5.4

score 0 · Accepted Answer

How are you? you need to use appendChild instead of innerHTML, I show you your code with some modification, I hope it works for you:

function getInput(type, placeholder){
  var nodo = document.createElement("input");
  nodo.type = type;
  nodo.placeholder = placeholder;
  return nodo;
}

function append(className, nodoToAppend){
  var nodo = document.getElementsByClassName(className)[0];
  nodo.appendChild(nodoToAppend);
}

/*ESTE ES EL CODIGO Q SE SUPONE DEBERIA  AGREGAR LAS CAJAS DE TEXTO */
function Agregaitems(){

		var nodo1 = getInput("text", "Nombre del producto NUEVO");
    var nodo2 = getInput("text", "Cantidad");
    var nodo3 = getInput("text", "Precio");
    var nodo4 = getInput("text", "resultado");
    
    append("cajasnompro", nodo1);
    append("cajascantidad", nodo2);
    append("cajaprecio", nodo3);
    append("cajaresultado", nodo4);
	}
  /*----------------------------------------------------*/
  /*ESTA FUNCION ES PARA MULTIPLICAR LA CANTIDA POR EL PRECIO UNITARIO */
	 function Resultado(posi){
		 var precio = document.getElementsByClassName('precio');
		 var cantidad = document.getElementsByClassName('cant');
		  var resultado = document.getElementsByClassName('resultado');
		   cost =  precio[posi].value * cantidad[posi].value;
		 resultado[posi].value=cost;
	 }

.titulos{
  text-align: center;
}
#FrmLista{
  width: 100%;
  margin: 0 auto;
}
label{
  margin: 5px;
  font-size: 150%;

}
#resultado{
    font-size: 250%;
}
.Contecajas{
  width:100%;
	border: solid 1px red;
	display: flex;
}
.cajasnompro,.cajascantidad,.cajaprecio,.cajaresultado{
	max-width: 60%;
	float: left;
}
.cajasnompro{
	width: 60%;
	margin: 2px;
}
.cajascantidad,.cajaprecio,.cajaresultado{
	width: 13%;
	margin: 2px;
}

.cajasnompro input,.cajascantidad input,.cajaprecio input,.cajaresultado input{
	width: 100%;
	height: 30px;
	text-align: center;
}

.controles input{
  background-color: rgb(108, 108, 108);
  padding: 2px;
  height: 50px;
  width: 49.3%;
  border: none;
  font-size: 80%;
  color: rgb(255, 249, 254);
  font-family:'Roboto Condensed', sans-serif;
}
@media screen  and (max-width: 621px){
	.titulos{
  text-align: center;
		font-size: 10px;
}
}

<html>

<body>
<form id="FrmLista">
    <h2 class="titulos">Ingrese los productos que comprará</h2>
    <div  class="Contecajas">
     <div class="cajasnompro">
      <h3 class="titulos">Productos</h3>
      <input type="text" placeholder="Nombre del producto"  >
      <input type="text" placeholder="Nombre del producto"  >
     </div>
     <div class="cajascantidad">
     <h3 class="titulos">cantidad</h3>
      <input type="number" placeholder="Cantidad" class="cant"  >
      <input type="number" placeholder="Cantidad" class="cant"  >
      </div>
      <div class="cajaprecio">
     <h3 class="titulos">Pre Und</h3>
      <input type="number" placeholder=" Precio del producto" class="precio" onkeyup="Resultado(0)" >
      <input type="number" placeholder=" Precio del producto" class="precio" onkeyup="Resultado(1)" >
    </div>
     <div class="cajaresultado">
     <h3 class="titulos">Resultado</h3>
      <input type="number" placeholder=" Resultado" class="resultado"  >
      <input type="number" placeholder=" Resultado" class="resultado"  >
    </div>
	  </div>
    <div class="controles">
 <input type="button" value="CALCULAR" onclick="calcular()">
 <input type="button" value="ABREGAR MAS PRODUCTOS" onclick="Agregaitems()">
 <label>Total :</label><label  id="resultado">0.00</label>
 </div>
  </form>
</body>
</html>