Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

OnClick suddenly not working on Google Sites in Chrome

I wrote a page that used buttons with onclick to call a function as part of a set of practice problems and answers for my students. It has worked since July with no issues through Friday, September 5 at least. Today the buttons fail to function at all in Chrome, and I can't figure out why for the life of me. They do continue to function properly in IE.

I've posted the simplest code I could write that won't work below. It's awfully simple, and honestly I think it's fine. It seems to work if I paste the entire thing into JSFiddle's HTML box, but if I try to separate the script it doesn't do anything. I don't know whether that's because it's broken or because I am separating it incorrectly though.

I'm having trouble trying to debug it, largely because Google Sites completely rewrites your work into its own format which is more or less unreadable without being made of silicon. When I load this and try to click, I do get an exception:

Uncaught Error: shouldn't happen: ES5/3 object passed to makeDOMAccessible

But I have had absolutely no luck with figuring out what is happening there, or whether that is even really the problem or not.

I've read a lot about Google Sites being picky with Javascript, and I don't know whether the issue is with Sites or Chrome or the two together or what, but it's something that I'd like to get sorted out, as the bulk of my students and I primarily use Chrome.

All of the code below is going into an inserted HTML box as written, just FYI.

Apologies if this turns out to be a duplicate; I searched for quite a while and couldn't find a solution.

<html>
<body>
<button onclick="Check()">Push Me</button>

<script>
function Check() {
    alert("It worked");
}
</script>

</body>
</html>

Any suggestions for fixing what I've got (if it's even broken) or redoing it in a straightforward way that would work with Sites and Chrome would be welcome. Thanks in advance.

Here is one full page that was working previously in Chrome and is no longer. It displayed the rows of a table as you pressed the various buttons.

EDIT: This appears to work in older versions of Chrome. I guess I need to hit up the Chrome forums with this issue.

like image 686
Jason Patterson Avatar asked Sep 09 '14 02:09

Jason Patterson


People also ask

Does JavaScript work on Google Sites?

We recently made it possible to embed webpages as iframes in the new Google Sites. With this launch, we're giving you one more tool to customize your sites—you can now embed HTML and JavaScript code directly into your sites. To get started, select Embed from the Insert menu and choose Embed Code.

What is this in onclick event?

The onclick event generally occurs when the user clicks on an element. It allows the programmer to execute a JavaScript's function when an element gets clicked. This event can be used for validating a form, warning messages and many more. Using JavaScript, this event can be dynamically added to any element.


1 Answers

The workaround suggested by epascarello, using addEventListener in place of onclick events, seems to work. I still can't get the alert window in my example to work for some reason (against Sites policy?), but the actual functionality I wanted, setting the innerHTML of a paragraph object, is working properly.

This appears to be an issue between Google Sites and Chrome v.37. Hopefully it is resolved in the near future.

Here is an example of equivalent code that is working correctly.

<html>
<body>

<button id="AnswerButton1">Check Answer 1</button>

<p id="Answer1"></p>

<script>
    document.getElementById("AnswerButton1").addEventListener("click",function(){Answer(1);});

    function Answer(n){
        document.getElementById("Answer"+n).innerHTML = "Answer to Number 1";
    }  

</script>
</body>
</html>

Thanks to those who helped.

like image 148
Jason Patterson Avatar answered Sep 21 '22 17:09

Jason Patterson