No puedo entender cómo convertirlos en botones usando la matriz:
var widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"]Cualquier ayuda sería apreciada. Este es mi código que estoy tratando de usar
<body> <div id="demo"></div> <script> var widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"]; </script> </body> </html>En su HTML: <div id="new">
En tu JS/script:
var widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"]; var element = document.getElementById("new"); for (const widgetButtonsKey of widgetButtons) { var x = document.createElement("BUTTON"); x.innerText = widgetButtonsKey console.log(x); element.appendChild(x); }Aquí hay otra forma de hacerlo, usando forEach() .
Los ID no pueden contener espacios, por lo que eliminamos el espacio del nombre/texto del elemento antes de configurar el ID.
const widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"] const demo = document.getElementById('demo'); widgetButtons.forEach( (item, idx) => { const btn = document.createElement('button'); btn.id = item.replace(' ', ''); btn.innerText = item; demo.appendChild(btn); }); <html> <body> <div id="demo"></div> </body> </html>Aquí hay otro enfoque.
var widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"]; document.getElementById('demo').innerHTML = widgetButtons.map(text=>{ return `<button>${text}</button>`; }).join(' '); <div id=demo></div>