Estoy tratando de hacer un botón para mi página web que cambie TODA la paleta de colores de la página con Code.org AppLab. El único problema es que code.org no permite el uso de la etiqueta <script> por "razones de seguridad". Por lo que sé, la única forma en que puedo activar la configuración de CSS con un botón es con getElementById() . Si alguien sabe cómo activar la configuración de CSS cuando se hace clic en un botón sin JS, cómo vincular archivos JS externos a un archivo html, o usar JS en línea SIN el uso de la etiqueta <script> , muéstrame cómo hacerlo.
Atributos HTML. También puede estar bloqueado, pero vale la pena intentarlo. Mira este ejemplo:
<!--It's not necessary, but it'd be easy to put all your scripts inside a template tag or the like--> <template id="script" style="display:none"> alert("Hello, world! JavaScript has been injected"); document.getElementById("btn").style.cssText = ` padding: 5px 10px; border: none; background-color: orange; color: white; font-family: 'Segoe UI', sans-serif; `; </template> <button id="btn" onclick="(Function(document.getElementById('script').innerHTML))()">Inject JavaScript</button> <!--It's not necessary, but it'd be easy to put all your scripts inside a template tag or the like--> <template id="script" style="display:none"> alert("Hello, world! JavaScript has been injected"); document.getElementById("btn").style.cssText = ` padding: 5px 10px; border: none; background-color: orange; color: white; font-family: 'Segoe UI', sans-serif; `; </template> <button id="btn" onclick="const s=document.createElement('script');s.innerHTML=document.getElementById('script').innerHTML;document.body.appendChild(s);">Inject JavaScript</button> Si todo lo demás falla, también podría usar una etiqueta <a> y ejecutar JavaScript como una URL (este ejemplo no funcionará cuando lo esté ejecutando en StackOverflow debido a lo que sea):
<!--It's not necessary, but it'd be easy to put all your scripts inside a template tag or the like--> <template id="script" style="display:none"> alert("Hello, world! JavaScript has been injected"); document.getElementById("btn").style.cssText = ` padding: 5px 10px; border: none; background-color: orange; color: white; font-family: 'Segoe UI', sans-serif; `; </template> <!--Prefix JavaScript URLs with "javascript:"--> <a href="javascript:(Function(document.getElementById('script').innerHTML))()" id="btn">Inject JavaScript</a>