OnClick suddenly not working on Google Sites in Chrome - javascript

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.

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.

Related

Javascript is acting buggy on Chrome

It's a little hard to describe as I have very little knowledge about Javascript, but it seems to be causing some issues with my Chrome browser. The best way I can say it is that a lot of things that use Javascript are broken. For example, when I visit a Wikipedia page and try to click 'show' on a nav-box, it takes me to the top of the page instead of opening the box. These things still work on IE, so I know this issue at least limited to Chrome. I don't know how this issue started. What exactly is going on here, and how can I fix it?
It's been resolved. I did a full reinstallation of Chrome.

What can be the reasons for JavaScript breakpoint is not hit?

I set a breakpoint in a script block of a razor view.
VS2012 attaches to IE but breakpoint has yellow triangle with exclamation mark saying:
The breakpoint will not currently be hit. The code in the document is
not loaded.
Script debugging is enabled in Internet Options of IE.
Have no idea what is wrong.
I faced this problem too. After trying many codes and things take from different posts in Stackoverflow and others websites, they have not solve my problem. When i have take a look for #robert4 solution and go back in my javascript code, i saw one error and fixed it, by doing like that, i have finally solve may problem and can now get a breakpoint in my javascript document. For those who will face this type of problem, i think that the first thing to do it is to verify your js file code by code to see if there is no error before beginning to implement each of others solutions take from differents posts.
When I had similar issue it turned out that an omitted } was the cause
(in one of the JavaScripts of the page, one of the {}s was not closed).
There was no error message on the browser console at all,
just didn't work and I had no clue for half an hour.
When I fixed the missing }, everything began to work as expected.

DOM issues in IE

I've developed an application that I had tested in Chrome and Firefox but then upon testing in IE I noticed a few things weren't working quite as they should so I made a couple tweaks and everything seemed to be working as it should.
However, as if by some sort of magic when I was going through another round of testing in IE I started noticing that I was getting a lot of debugging errors that I had previously been getting.
They all seem to be to be DOM related with IE being unable to get the value of properties because the object is either null or undefined.
I was having none of these issues previously and I have absolutely no idea what might have changed to be causing this but does anyone have any experience of this sort of issue and have some suggestions as to how to resolve the issue?
I've had a look through all the different pages and functions I've been working on the last couple hours but can see nothing obvious that might be causing this.
Any help would be very much appreciated.
Thanks!
The latest versions of IE come with a pretty decent script debugger. If you press F12, a developer tools window will pop up. Click on the "Script" tab and start working your problem from there. Its not as robust or efficient as firebug or chrome's developer console, but its better than nothing and more often than not can get you pointed in the right direction when it comes to squishing IE bugs.

Chrome problems

I have a few annoying problems.
The thing is, that when I am looking with Firefox every thing work perfect, after I try it with Chrome, sometimes happens that the code appears one web page (it is not all the time).
So, it appears in input text it display " />" or some piece of code of java script, which is written inside input tag.
The web page is: www.kalahoo.eu (do not try it in English )
In this picture you can see the problem:
http://rhc.si/slike/problem.png
Thank you very much for you help!!!
Can you post a link to the exact page with this error?
Either way, I would imagine that if you use the Chrome developer tools, you should get pointed in the right direction. Might want to give that a try.
You seem to be improperly escaping code that's making the HTML end before the rest of the attributes are read.
Check the spot in the code where its doing that, its probably a bad ' or " or even a >.

IE 8 Frameset / Javascript error

Ok here's the problem. I have a page that works in FF3 and Safari4 no problem. It's IE8 that's causing the issue, go figure. I remember in the Netscape days when it was the opposite.
Anyways,
So i'm building a website for a friend - i have three pages. the first two work fine on their own, but when they are combined in a frameset in the third (main.html) in IE8 all hell breaks loose. here are the pages:
www.wither.org/Karoline/navigation.html
www.wither.org/Karoline/portfolio.html
http://www.wither.org/Karoline/main.html
& my CSS if you want it: www.wither.org/Karoline/css/styles.css
if anyone can figure out how to fix this, i'd be eternally grateful. It's completely baffling to me and i've tried all kinds of options. i upgraded jquery to the latest version but then my scroller didn't work and i can't dive too much into the javascript code right now.
Please if you could help out, it would mean a lot to me. this has to go live sometime tomorrow.
There is a JS error when executing the following line of code document.getElementById("loading").style.display = 'none';
in the portfolio page.
Apparently, the element with id 'loading' is not being found. However, if I continue execution of the JavaScript on the page (from within the debugger), there are no issues, and the behavior is the same as in Firefox. This is indicative of a concurrency issue - the element 'loading' is not present in the DOM yet, but the script is attempting to change the element's style.
In order to fix this issue, you will have to ensure that the 'loading' element is present in the DOM before its style is being changed. In fact, you could delay the execution of the onload event handler (using window.setTimeout), until a point where the element is present in the DOM.
What's the actual javascript error?
And IE does have an issue in regards to invalid/broken markup inside of frames, I would try
a) commenting out each script and see which causes the js error
b) if commenting out all the js did nothing it might be related to the invalid markup inside of a frame issue, in which case I'd ditch frames alltogether.
yeah....
so thanks so much for your help. problem solved and i figured the other CSS error. should have picked up on that one earlier.
so site is working and if you want to see what happened with your help,
http://www.wither.org/Karoline
it works perfectly cross platform. made the deadline with hours to spare. thanks SO much. can't believe how well this worked.

Categories

Resources