How to link JavaScript and HTML5 pages without <script> tag?

Issue

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.

Solution

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>

A similar approach to the above is to inject a script tag:

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

Answered By - code