4

Tengo una pagina web, la cual quiero que al clickear un botón se active un código html (o sea mas botones) para hacer un menu.

¿Como puedo hacer eso?

Tengo esto, pero al 'clickar' el botón, borra toda la página y pone solo el botón que activo.

(Es un ejemplo de lo que tengo)

function activar() {
    document.write("<div><button id='b1'></button></div>");
}
<button onclick="activar" value="menu" type="submit"></button> 

4 respuestas 4

6

Te borra todo el contenido porque el botón es tipo submit y al colocarlo así reinicia toda la pantalla como si le dieras un F5; aquí te coloque 2 ejemplos le quite el submit y en el evento onclick debes de llamar la función con sus parentesis así onclick="activar()":

En este ejemplo simplemente creas el botón en cualquier parte del body:

function activar(){
  document.body.innerHTML += "<div><button id='b1'>Nuevo Botón</button></div>";
}
<button onclick="activar()" value="menu">Activar</button>

y con este creas el botón en un elemento en especifico como un div con un id:

function activar(){
      let div = document.getElementById("nuevo_boton");
      div.innerHTML = "<div><button id='b1'>Nuevo Botón</button></div>";
    }
#nuevo_boton{
  border:1px solid red;
}
<button onclick="activar()" value="menu">Activar</button>
<div id="nuevo_boton"></div>

5

Puedes ocupar el método innerHTML para renderizar etiquetas html en el DOM

document.getElementById("container").innerHTML = "<img src='https://cdn-images-1.medium.com/max/2000/1*6ahbWjp_g9hqhaTDSJOL1Q.png '/>"
<div id='container'></div>

0

Acabo de subir una pequeñísima librería VanillaJS, podrías hacer esto:

function activar(){
  document.body.innerHTML += 
    DIV({},()=>
      BUTTON({id:"b1"}, ()=> "Nuevo Botón")
    );
}

la armé para que sea más semántica la escritura de HTML desde javascript, te invito a que la veas

https://github.com/gianlucafiore/VanillaJsEloquent

0

No usen tanto innerHTML. Ni tanto javascript inline. Hay otras formas que pueden ser más adecuadas.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo</title>
</head>
<body>

<!-- Botón de ejemplo -->
<button type="button" id="miBotonConEsteId">Ejemplo</button>

<!-- Div en el que tener agrupado el código generado por javascript. -->
<div class="codigoDinamico">
    
</div>

<!-- Codigo javascript -->
<script>
    
/* Usa el modo stricto para que me avise de
fallos como olvidar var o asignar un valor a
una constante o a una propiedad de solo lectura. */
"use strict";

/* variable para contar las pulsaciones. */
var i = 0;

/* Obtener el elemento por selector de css.
El # sirve para seleccionar por id.
El operador punto para encadenar métodos.
El addEventListener permite añadir escuchadores
de eventos sin sobrescribir los ya existentes.
"click" es el tipo de evento que queremos escuchar.
function() { } es una función anónima utilizada para
encapsular la expresión. Esto permite utilizar múltiples
expresiones y previene su ejecución fuera del evento. */
document.querySelector("#miBotonConEsteId").addEventListener("click", function() {
 
/* Se creará y retornará un nuevo elemento HTML en base al string. Que se guarda en la variable. */
  var miDiv = document.createElement("div");
  
  var miBoton = document.createElement("button");
  
/* Se debe preferir siempre innerText, createElement, append/prependChild, createTextNode,
createElement("textarea").value, etc sobre innerHTML y similares. No es lo mismo añadir tu
una etiqueta y un TEXTO del usuario, que añadir CODIGO del usuario. De todas formas añadiendo
TEXTO del usuario, es posible que el usuario consiga ejecutar código. Véase XSS, HTMLi, IDOR, ... */

/* Añade texto al botón. */
  miBoton.innerText = "Hazme Click!";
  
/* Añade atributo id al botón. */
  miBoton.id = "botonHazmeClick";
  
/* Añade atributo clase al botón */
  miBoton.className = "botonesCreadosConJavascript";
  
/* Añade color de texto al botón. Mejor usar un archivo .css
externo para reusar código entre varias páginas (reduce tamaño del proyecto)
y para mejorar la seguridad del código. */
  miBoton.style.color = "coral";
  
/* Añade un escuchador de eventos al botón. */
  miBoton.addEventListener("click", function() {
    
/* Muestra un alert cuando se pulse el botón. */
    alert("Me hiciste click!");
    
/* Cambia el fondo del botón cuando se pulse el botón. */
    miBoton.style.backgroundColor = "#000";
    
/* Si i es valor verdadero, true, 1, texto, o más (se inicializó asignándole 0 en el principio del script)
entonces oculta el botón. En caso contrario, suma 1 para que si valia 0 ahora valga uno.
El resultado de forma resumida es que la segunda vez que se pulse el botón se oculte. 
Esta expresión equivale a un if(i==1) { oculta el botón } else { i = i + 1 }; Se llama operador terciario o ternario
por las 3 expresiones CONDICIÓN ? SI_SE_CUMPLE_PASA_ESTO : SI_NO_SE_CUMPLE_PASA_ESTO_OTRO ; */ 
    i ? miBoton.style.display = "none" : ++i;
    
  }/* Se cierra la función anónima.*/ );/* Se cierra los paréntesis de los parámetros del metodo addEventListener. */

/* Mete el nuevo elemento botón dentro del nuevo elemento div. */
  miDiv.appendChild(miBoton);
  
/* Mete el div que contiene el botón dentro del div con class="codigoDinámico" */
  document.querySelector(".codigoDinamico").appendChild(miDiv);

});
</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.