We Keep Coding

Onclick function doesn't working on mobile

I'm a novice of JS and I'm trying to get this result (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup) but I've got some problem with the mobile view of this code...it works good on every other devices but not on iPhone (x, 8, etc). How is it possible?
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}

If the problem happens exactly on Safari, it might be due to the missing cursor: pointer; in your CSS.
Safari doesn't like to fire your functions on HTML elements that don't follow certain conditions.
By the way, even if they do (according to my personal experience) it's not guaranteed that your listeners will actually fire.
It happens due to the fact that browsers like Safari or IE seems to be more about a good joke than a good browser.
How do we deal with that?
Well, IRL we mostly use some libraries (for instance, Vue or React) that perform cross-browser optimization better than we do.
For your simple use case, you might want to convert your "myPopup" element into a zero-styled button.
All major browsers tend to work more or less ok with buttons.

Getting unload to work with a button cross-browser's

I am wondering if I can have the unload method in Javascript do a button.click; or a document.getElementById('target').click();
The reason for this is I want to clear the information in the browser but I can't seem to get the unload method to work right. But I don't even know if the unload method is capable of doing a button.click or a document.getElementById('target').click(); Is there like a list of things this method can or cannot do? here is the code I am trying to get working.
window.onunload=leave;
function leave() {
//alert("Leaving");
document.getElementById('kioskform:broswerCloseSubmit').click();
}
The alert seems to be showing in everything ("IE, FireFox,Safari") but in Chrome ('don't know why) but i can't seem to get the clear options i am using to work with the unload method. Not to mention I am wondering if there is a good way to detect which browser the individual is using to load in different parts of the unload script any idea's or suggestions or advice is greatly appreciated.

If you were to use jQuery , you could use the DirtyForm plugin. This would accomplish what you are trying to do.

why is this click event failing

ok so i am stumped if you go to my site and click the right center "Take a Quick Tour >>>" ..i get this lightbox that appears and i want to close it programmatically and in firebug i can see the x is id "rokbox-close" but running this in firebug
document.getElementById('rokbox-close').click();
but i get this error
TypeError: document.getElementById("rokbox-close").click is not a function
any ideas how to do this
i can run this
document.getElementById("rokbox-close")
and get the element but the click function fails...i dont have jquery installed so i was wondering if there is a javascript thing i am missing

Not all browsers have a "click()" function associated with buttons and anchors and etc. IE does (I think), but (for example) Firefox doesn't.
edit — wow according to MDC, Firefox 5 will support this.
If you were using a framework such as jQuery, then that code might allow you to do what you want. (With jQuery you definitely can.)
(Also, strictly speaking, we're not talking about an event here. We're talking about the ability to trigger the event handling mechanism programatically.)

If you use simple JavaScript istead of 'click' use 'onclick':
document.getElementById("rokbox-close").onclick = youClickHandlerFunction
If you use jQuery use:
$('#rokbox-close').click(youClickHandlerFunction)
See more info here: http://www.quirksmode.org/js/introevents.html
Or here: http://api.jquery.com/click/

The click() function is something that is not supported by all browsers. You're probably thinking of the click handler that jQuery provides.
For a more complete view of why click() isn't universally handled, check out this link, which covers the long and twisty history of event handling across different browsers:
http://www.quirksmode.org/js/introevents.html

Listen for keypress while iframe has focus?

Is there any way to listen for keypress events in a parent page while the iframe has focus? Or, alternatively, is it possible to pull away the focus from the iframe?
Please note, the iframe is not within the same domain, so I cannot modify its contents via javascript.
I've tried the following jquery in the parent page, thinking perhaps an intermittent blur would work, but it doesn't seem to.
function iframeBlur(){
$("#iframe").blur();
}
var blurif = setInterval(iframeBlur, 500);

It looks like I just had the wrong syntax. window.focus(); works in ffx and chrome (I've got to resolve other ie bugs first before i know with that).
function iframeBlur(){
window.focus();
}
var blurif = setInterval(iframeBlur, 500);

I'm pretty sure this is not possible, iframes are pretty extensively protected from the parent JavaScript. This is a good thing for security reasons. Otherwise a hacker could register something like gmai1.com, have a big iframe with the real gmail.com and then log password entries from the parent.

How to trace JavaScript events like onclick onblur?

Is there a way to debug or trace every JavaScript event in Internet Explorer 7?
I have a bug that prevents scrolling after text-selecting, and I have no idea which event or action creates the bug. I really want to see which events are being triggered when I move the mouse for example.
It's too much work to rewire the source and I kind of hoped there was something like a sniffer which shows me all the events that are triggered.

Loop through all elements on the page which have an onXYZ function defined and then add the trace to them:
var allElements = document.all; // Is this right? Anyway, you get the idea.
for (var i in allElements) {
if (typeof allElements[i].onblur == "function") {
var oldFunc = allElements[i].onblur;
allElements[i].onblur = function() {
alert("onblur called");
oldFunc();
};
}
}

You might want to try Visual Studio 2008 and its feature to debug JavaScript code.
If the problem is not specific to Internet Explorer 7 but also occurs in Firefox, then another good way to debug JavaScript code is Firefox and the Firebug add-on which has a JavaScript debugger. Then you can also put console.log statements in the JavaScript code which you can then see the output of in the Console Window in Firebug, instead of using alerts which sometimes mess up the event chain.

#[nickf] - I'm pretty sure document.all is an Internet Explorer specific extension.
You need to attach an event handler, there's no way to just 'watch' the events. A framework like jQuery of the Microsoft Ajax library will easily give you methods to add the event handlers. jQuery is nice because of its selector framework.
Then I use Firebug (Firefox extension) and put in a breakpoint. I find Firebug is a lot easier to set up and tear down than Visual Studio 2008.

Borkdude said:
You might want to try Visual Studio 2008 and its feature to debug JavaScript code.
I've been hacking around event handling multiple times, and in my opinion, although classical stepping debuggers are useful to track long code runs, they're not good in tracking events. Imagine listening to mouse move events and breaking into another application on each event... So in this case, I'd strongly advise logging.
If the problem is not specific to Internet Explorer 7 but also occurs in Firefox, then another good way to debug JavaScript code is Firefox and the Firebug add-on which has a JavaScript debugger.
And there's also Firebug Lite for Internet Explorer. I didn't have a chance to use it, but it exists. :-) The downside of it is that it doesn't a fully-fledged debugger, but it has a window.console object, which is exactly what you need.

It's basic, but you could stick alerts or document.write calls in when you trigger something.

The obvious way would be to set up some alerts for various events something like:
element.onclick = function () { alert('Click event'); }
Otherwise you have a less intrusive option of inserting your alerts into the dom somewhere.
But, seriously consider using a library like jQuery to implement your functionality. Lots of the cross-browser issues are solved problems and you don't need to solve them again. I am not sure exactly of the functionality you are trying to achieve but there are most probably plenty of scrolling and selecting plugins for jQuery you could use.

I am not sure on the exact code (it has been a while since I wrote complex JavaScript code), but you could enumerate through all of the controls on the form and attach an event that outputs something when the event is triggered.
You could even use anonymous functions to wrap the necessary information for identifying which event was triggering.

One thing I like to do is create a bind function in JavaScript (like what you can find in the Prototype library) specifically for events, so that it passes the "event" object along to the bound function. Now, if you were to do this, you could simply throw in a trace call that will be invoked for every handler that uses it. And then remove it when it's not needed. One place. Easy.
However, regardless of how you get the trace statement to be called, you still want to see it. The best strategy is to have a separate pane or window handing the trace calls. Dojo Toolkit has a built-in console that runs in Internet Explorer, and there are other similar things out there. The classic way of doing it is to create a new window and document.write to it.
I recommend attaching a date-time to each trace. Helped me considerably in the past.
Debugging and alerts usually won't help you, because it interrupts the normal event flow.

Matt Berseth has something that may be the kind of thing you're looking for in Debugging ASP.NET AJAX Applications with the Trace Console AjaxControlToolkit Control.
It's based on the Yahoo YUI logger, YUI 2: Logger.

My suggestion is, use FireFox together with FireBug and use the built-in Debug/Trace objects. They are a charm.