I am trying to make a button for my webpage that changes the ENTIRE colour palette of the page with Code.org AppLab. The only problem is, code.org doesn't allow the use of the <script> tag for "security reasons". As far as I know the only way I can turn on CSS settings with a button is with getElementById(). If anyone knows how to activate CSS settings when a button is clicked without JS, how to link external JS files to an html file, or use inline JS all WITHOUT the use of the <script> tag please show me how.
HTML attributes. It may be blocked as well, but it's worth giving a try. See this example:
<!--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>If all else fails, you could also use an <a> tag and execute JavaScript as a URL (this example won't work when you're running it on StackOverflow due to their whatever):
<!--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>