Javascript on Google Sites

Question

Javascript on Google Sites

1.3k Views Asked by syed88 At 13 April 2025 at 21:20

I am a bit new to the coding. I tried to put javascript on my google site in an HTML box but it is not working. I am pasting my code here.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display an alert box:</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>

</body>
</html>

It should validate with the alert box. The code is running fine when I am running it on the localhost but is not working when I am pasting it in the HTML box within a google site. my company is using Google gadget to make the HTML and javascript run over the google site. Is there any simpler way to do without google gadget?

Original Q&A

There are 2 best solutions below

**Samuel Liew** · Answer 1

Samuel Liew On 17 November 2014 at 02:08

Perhaps you shouldn't be pasting the <html> and <body> tags in the widget box, as it is already part of a html document.

Simply try this instead:

<button onclick="alert('I am an alert box!');">Try it</button>

**Jroonk** · Answer 2

You can program a div with a method to act like the alert method. Stylize and position it however you want, but here is an example of one I called msgBox that takes a message and a type (just changes the color for critical, warning, and info) and shows up like a banner at the top of the document:

<!DOCTYPE html>
<html>
<head>
<style>
  .msgBox{position:absolute;width:50%;top:0px;left:-25%;margin-left:50%;padding:1%;color:black;display:none;font-family:"Calibri","Arial",sans-serif;vertical-align:middle;}
  .info{background-color:rgba(120,170,250,0.95);}
  .warn{background-color:rgba(240,230,120,0.95);}
  .crit{background-color:rgba(250,120,120,0.95);}
  .msgBoxMessage{width:98%;max-width:98%;height:100%;color:black;font-size:1.8vw;vertical-align:middle;}
  .msgBoxClose{height:100%;color:black;font-weight:bold;font-size:3vw;cursor:pointer;transition:0.2s;vertical-align:middle;}
  .msgBoxClose:hover{color:white;transition:0.2s;}
</style>
<script>
  function msgBox(message, type) {
    var msgBox = document.getElementById("msgBox");
    var msgBoxMessage = document.getElementById("msgBoxMessage");
    msgBoxMessage.innerHTML = message;
    msgBox.style.display="block";
    msgBox.className="msgBox " + type.toLowerCase();
  }
</script>
</head>
<body>
<h2>This page shows how to drive messages without using javascript alert.</h2>
<div class="msgBox info" id="msgBox">
  <table style="width:100%;">
    <tr>
      <td class="msgBoxMessage" id="msgBoxMessage"></td>
      <td class="msgBoxClose" onclick="document.getElementById('msgBox').style.display='none';">&times;</td>
    </tr>
  </table>
</div>
<button onclick="msgBox('This is for your <u>information</u>.', 'info');">Info</button>
<button onclick="msgBox('This is just a <i>warning</i>.', 'warn');">Warn</button>
<button onclick="msgBox('This is a <b>critical</b> message!', 'crit');">Crit</button>
</body>
</html>

Javascript on Google Sites

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in GOOGLE-SITES

Trending Questions

Popular # Hahtags

Popular Questions