elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  como dibujar botones con javascript?		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: como dibujar botones con javascript?  (Leído 3,917 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
como dibujar botones con javascript?
« en: 21 Mayo 2020, 01:58 am »
como puedo dibujar botones en un html usando javascript y que esa funcion reciba como parametro un string o array de caracteres?

ahi donde dice dibujarPalabra(); quiero q vaya botones de acuerdo a la cantidad de palabras que tenga mi palabra secreta en ingles

por ejemplo si dise  rata abajo que arriba se dibujen 3 botones donde yo pueda seleccionarlos y colocar las letras R A T
« Última modificación: 21 Mayo 2020, 02:08 am por Beginner Web » En línea
7w7
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.165



Ver Perfil
Re: como dibujar botones con javascript?
« Respuesta #1 en: 21 Mayo 2020, 03:32 am »
Anda que interesante juego :xD. Crear los botones es sencillo, solo tienes que ir creándolos uno a uno para cada letra de la palabra, esto de una manera controlada para luego ahí mismo ir manipulándolos, por ejemplo yo lo he hecho así para usar el teclado físico en lugar de otros botones, bien lo puedes cambiar para tu caso:

Código
  1. <div id="div_palabra"></div>
  2.  
  3. <script>
  4.   let activo
  5.   dibujarPalabra('RAT')
  6.   capturaTeclado()
  7.  
  8.   function dibujarPalabra(palabra) {
  9.     const div = document.getElementById('div_palabra')
  10.     for (let i = 0; i < palabra.length; i++) {
  11.       const btn = document.createElement('button')
  12.       btn.addEventListener('click', (e) => activo = e.target)
  13.       const txt = document.createTextNode('_')
  14.       btn.appendChild(txt)
  15.       div.appendChild(btn)
  16.     }
  17.   }
  18.  
  19.   function capturaTeclado() {
  20.     document.addEventListener('keyup', (e) => {
  21.       if (activo && e.keyCode > 64 && e.keyCode < 90) {
  22.         activo.innerText = e.key
  23.       }
  24.     })
  25.   }
  26. </script>
En línea
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
Re: como dibujar botones con javascript?
« Respuesta #2 en: 21 Mayo 2020, 03:58 am »
me has salvado la vida :(
En línea
7w7
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: como dibujar botones con javascript?
« Respuesta #3 en: 21 Mayo 2020, 11:44 am »
Cita de: EdePC en 21 Mayo 2020, 03:32 am
Anda que interesante juego :xD. Crear los botones es sencillo, solo tienes que ir creándolos uno a uno para cada letra de la palabra, esto de una manera controlada para luego ahí mismo ir manipulándolos, por ejemplo yo lo he hecho así para usar el teclado físico en lugar de otros botones, bien lo puedes cambiar para tu caso:

Código
  1. <div id="div_palabra"></div>
  2.  
  3. <script>
  4.  let activo
  5.  dibujarPalabra('RAT')
  6.  capturaTeclado()
  7.  
  8.  function dibujarPalabra(palabra) {
  9.  const div = document.getElementById('div_palabra')
  10.  for (let i = 0; i < palabra.length; i++) {
  11.  const btn = document.createElement('button')
  12.  btn.addEventListener('click', (e) => activo = e.target)
  13.  const txt = document.createTextNode('_')
  14.  btn.appendChild(txt)
  15.  div.appendChild(btn)
  16.  }
  17.  }
  18.  
  19.  function capturaTeclado() {
  20.  document.addEventListener('keyup', (e) => {
  21.  if (activo && e.keyCode > 64 && e.keyCode < 90) {
  22.  activo.innerText = e.key
  23.  }
  24.  })
  25.  }
  26. </script>


Usa documentFragments para alterar el DOM solo una vez por motivos de performance. Haces append en el for al documentFragmente y al final de la función haces append del documentFragment al document real. Así actualizas solo 1 vez por llamada.
Para Android triggerea el evento key up? Mejor keydown no?
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
Re: como dibujar botones con javascript?
« Respuesta #4 en: 21 Mayo 2020, 15:37 pm »
Cita de: @XSStringManolo en 21 Mayo 2020, 11:44 am
Usa documentFragments para alterar el DOM solo una vez por motivos de performance. Haces append en el for al documentFragmente y al final de la función haces append del documentFragment al document real. Así actualizas solo 1 vez por llamada.
Para Android triggerea el evento key up? Mejor keydown no?

oye manolo como podria yo usar ese codigo en angular? porque la verdad eso funcionaria en un simple html dentro del body pero en angular la cosa cabia porque para poder usar scripts debo colocarlo en el index.html donde va el app ruter y bueno gracias
En línea
7w7
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: como dibujar botones con javascript?
« Respuesta #5 en: 22 Mayo 2020, 02:24 am »
Cita de: Beginner Web en 21 Mayo 2020, 15:37 pm
oye manolo como podria yo usar ese codigo en angular? porque la verdad eso funcionaria en un simple html dentro del body pero en angular la cosa cabia porque para poder usar scripts debo colocarlo en el index.html donde va el app ruter y bueno gracias
Yo de libs/frameworks de ese tipo ni idea. Me imagino que podrás hacerlo de unas 6 o 7 formas distintas. Mira un tuto a ver cual te conviene.
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.165



Ver Perfil
Re: como dibujar botones con javascript?
« Respuesta #6 en: 22 Mayo 2020, 03:46 am »
Jeje, yo también ando viendo unos tutoriales de Angular y es duro de roer :xD, es como aprender Laravel que en mi caso preferí CodeIgniter que es más digerible. Ando creando un hola mundo en Angular y el proyecto pesa 359MB con más de 58000 archivos y 500 carpetas, esto debido al node_modules.

- La verdad lo veo muy complicado, aparte de los recursos que consume, casi 1GB de Ram y bastante CPU, esto solo para el desarrollo, súmale esto a los recursos del IDE y queda peor que desarrollar en Java :xD. En mi caso estoy utilizando Visual Studio Code que más o menos ayuda, ni hablar de usar SublimeText u otro más sencillo porque con tantos archivos, componentes, módulos, rutas, referencias, dependencias, uno se pierde rápido, algo así como trabajar MVC bien segmentado o más bien un modelo de 500mil capas :xD.

- Lo que si voy viendo es que se le puede integrar Angular Material Design https://material.angular.io/components/categories que se ve bastante bien y es responsive. Puede que valga la pena si se practica bastante y se logra dominarlo. Esa manipulación del HTML como se hace con JSTL también se bien, pero es fácil perderse con tanta redirección y configuración de dependencias :huh:.
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
botones css y un javascript
Desarrollo Web 		Zeroql 4 3,738 Último mensaje 4 Junio 2011, 14:09 pm
por Zeroql
[HTML/javascript] Botones que no funcionan.
Desarrollo Web 		Puroguramu 4 5,311 Último mensaje 9 Diciembre 2012, 17:28 pm
por Puroguramu
Como hacer que al oprimir botones del teclado se opriman botones especificos
.NET (C#, VB.NET, ASP) 		hassuni 3 4,143 Último mensaje 9 Diciembre 2012, 16:47 pm
por Keyen Night
[Ayuda] Como Incrustar (Botones/label/ otro...) en alguna pagina web, con javascript.
Desarrollo Web 		**Aincrad** 2 2,996 Último mensaje 12 Mayo 2021, 20:59 pm
por **Aincrad**
Dibujar un corazón con el mouse al cargar la página (javascript)
Desarrollo Web 		Beginner Web 0 3,069 Último mensaje 22 Enero 2023, 02:48 am
por Beginner Web
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines