JavaScript - createElement

 
Vista:
sin imagen de perfil
Val: 17
Ha disminuido su posición en 3 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

createElement

Publicado por createElement (12 intervenciones) el 22/03/2020 22:05:06
Buen dia.

Por favor quien me pueda ayudar necesito hacer que al darle información al input este se muestre despues de oprimir el boton en el lado del hr (div2) como un checkbox y al lado del nombre de lo que se coloco en el input pero que no se pueda crear mas de un checkbox ya que si lo oprimo se crean varios checkbox, y que quede al lado el input y el checkbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<hmtl>
    <head>
        <title>Operacional</title>
    </head>
    <body>
        <form id="myForm">
            <div name="div1" id="div1">
                <h1>Agregar Operacion</h1>
                <label>Nombre del servicio</label><input type="text" required name="nombreserv" id="nombreserv">
                <br>
                <button type="button" onclick="myFunction()" name="button">Agregar opcion</button>
            </div>
            <hr>
            <div name="div2" id="div2">
            </div>
        </form>
    </body>
    <script type="text/javascript">
        function myFunction() {
            var x = document.createElement("INPUT");
            x.setAttribute("type", "checkbox");
            x.setAttribute("value", "nombreserv");
            x.setAttribute("name", "nombreserv");
 
            var porTagName = document.getElementsByTagName("input")[0].value;
            document.getElementById("div2").innerHTML = "" + porTagName, document.body.appendChild(x) + "";
        }
    </script>
</hmtl>

Proyecto

Les agradeceria sus respuestas es para un proyecto.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 40
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

createElement

Publicado por Marlon (90 intervenciones) el 23/03/2020 00:15:21
1
document.getElementById("div2").innerHTML = "" + porTagName, document.body.appendChild(x) + "";

Aqui estas agregando al div2 el valor de la variable porTagName, pero el input que creas lo estas agragando al body del html.
lo que tienes que hacer es agregar ambos elementos al div2
por ejemplo modifique tu funcion:

1
2
3
4
5
6
7
8
9
10
11
function myFunction() {
  let text = document.getElementById('nombreserv').value; //tomamos el valor del input nombreserv
  let div = document.getElementById('div2');  //Tomamos el div2 para agregar los elementos
  let input = document.createElement('input');// se crea el input
  input.setAttribute('type', 'checkbox'); // se le agrega el atributo checkbox
  let label = document.createElement('label'); // creamos el label
  label.textContent = text; //se le agrega al label el valor del input nombreserv
  // se agregan los elementos al div
  div.appendChild(label);
  div.appendChild(input);
}

Si sigues aprendiendo Javascript descara el uso de innerHtml utiliza el metodo TextContent para agregarle texto a un elemento.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Sebastian
Val: 14
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

createElement

Publicado por Sebastian (5 intervenciones) el 23/03/2020 00:26:29
Hola
Yo lo haría así
En vez de utilizar innertHTML, obtengo la etiquet div2 del html y le agrego el text y luego el checkbox
1
2
3
var div2 = document.getElementById('div2');
div2.appendChild(document.createTextNode(porTagName));
div2.appendChild(x);

Espero te sirva
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar