embedded javascript alert message not showing in google sites personal webpage

Question

I embedded below code into my google sites page. for some reason the alert window is not popping up.

<form xmlns="myform">
<input id="HelloWorld" onClick="alert('Hi')" type="button"  value="HelloWorld"/>
</form>

I tried the code in W3school code editor site and its works. Pictures attached.

Answer 1

google actively blocks stuff like popups in JS and maybe some HMTL implementations. I found a post here and k8oms mentioned his CSS and HTML version works. Check out their write up for a solution [k80ms blog post][2].

[2]: https://www.k8oms.net/document/popup

My apologies on the late edit.

Use JS to getElelementByID and select a visible/hidden element on myPopup to "show / hide" your window.

popupWindow.js

// When the user clicks, open the popup
function popupFunction() {
  // get the HTML element "myPopup" which is defined in your span element
  let popup = document.getElementById("myPopup");
  // toggle visibile 
  popup.classList.toggle("show");
}

Next you need to style your window with CSS something very basic would be.

style.css

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
}

Then we can create an onclick to call popupFunction() from your HTML page.

id="myPopup" is the important thing here, this is where JS's getElementById attaches itself to.

<button onclick="popupFunction()">clickMyButton
<div class="popup">
  <span class="popuptext" id="myPopup">
  Here is your "alert box"  not perfect. <br> 
  But you can place this span anywhere you'd like, including pop over all content like an alert box.. Just need to create a box template for "alerts".</span>
</div>
</button>

This is a very basic way to create an "alert" style popup window. If you were to define a stylized box with CSS that looks like a modern alert box you can call the <span class="popuptext" id="myPopup"> anywhere in your HTML to create a popup window. Areas such as a header or upper banner area would be a good place to add this span so it would display in the same spot "top & center" just as an alert box would.