como dibujar botones con javascript?

[Beginner Web]

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

[EdePC]

Anda que interesante juego . 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 (javascript) [Seleccionar] Expandir

<div id="div_palabra"></div>

<script>
  let activo
  dibujarPalabra('RAT')
  capturaTeclado()

  function dibujarPalabra(palabra) {
    const div = document.getElementById('div_palabra')
    for (let i = 0; i < palabra.length; i++) {
      const btn = document.createElement('button')
      btn.addEventListener('click', (e) => activo = e.target)
      const txt = document.createTextNode('_')
      btn.appendChild(txt)
      div.appendChild(btn)
    }
  }

  function capturaTeclado() {
    document.addEventListener('keyup', (e) => {
      if (activo && e.keyCode > 64 && e.keyCode < 90) {
        activo.innerText = e.key
      }
    })
  }
</script>

[Beginner Web]

me has salvado la vida

[@XSStringManolo]

Anda que interesante juego . 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 (javascript) [Seleccionar] Expandir

<div id="div_palabra"></div>

<script>
let activo
dibujarPalabra('RAT')
capturaTeclado()

function dibujarPalabra(palabra) {
const div = document.getElementById('div_palabra')
for (let i = 0; i < palabra.length; i++) {
const btn = document.createElement('button')
btn.addEventListener('click', (e) => activo = e.target)
const txt = document.createTextNode('_')
btn.appendChild(txt)
div.appendChild(btn)
}
}

function capturaTeclado() {
document.addEventListener('keyup', (e) => {
if (activo && e.keyCode > 64 && e.keyCode < 90) {
activo.innerText = e.key
}
})
}
</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?

[Beginner Web]

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

[@XSStringManolo]

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.

[EdePC]

Jeje, yo también ando viendo unos tutoriales de Angular y es duro de roer , 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 . 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 .

- 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 .