I am trying to write a script so that when I play an embedded sound object, a picture that I also have embedded will change.
function changePic() {
document.getElementById("sound").onclick = transform(document.getElementById("pic"));
}
function transform (pic) {
pic.src = "";
alert ("done");
}
The problem is that when I load the page, the Javascript code automatically runs even though I don't click play (autostart is set to false) on the sound object. Does anyone have an idea as to what is causing this?
When you write onclick = transform(...), you're calling transform and assigning the result to onclick.
You need to set the handler to an anonymous function that calls transform, like this:
document.getElementById("sound").onclick = function() {
transform(document.getElementById("pic"));
};
However, this is the wrong way to add events.
You should call element.addEventListener / element.attachEvent. (or just use jQuery)
Related
I appreciate how browsers work when deciding whether a window.open() was triggered by a click, as in, its only allowed when it came from a real element click event.
I want to write the same logic myself, how do I do that?
Say I have any JS function, called potentially anywhere and everywhere from the rest of my application, sometimes with a click event handler at the start of the callstack and some times not. How can I know this inside my method, without explicitly passing information about the start of the stack (click vs not) all the way around my application?
function iNeedToKnowIfStackFrame0WasAClickEventListener() {
var wasAClick = ???;
if(wasAClick)
window.open(...);
else
something.else();
}
You can get the event information using this.event.type.
You can either pass the event into the function like so:
function iNeedToKnowIfStackFrame0WasAClickEventListener(event) {
var wasAClick = event.type == "click";
if(wasAClick)
window.open(...);
else
something.else();
}
or you can get the event off this
function iNeedToKnowIfStackFrame0WasAClickEventListener() {
var wasAClick = this.event.type == "click";
if(wasAClick)
window.open(...);
else
something.else();
}
function restart_game() {
document.getElementById("myBody").style.backgroundColor = "rgba(255,255,255,1)";
finished=false;
do_game(); //do_game() has a prompt within it that interrupts the .document line.
}
So let's say I want to run document.getElementById before do_game() (a function that calls a prompt) but they are called by the same function: How do I make this happen effectively?
I want them both to run but in the order that I decide, without the prompt within do_game() happening before my style changes in the line before. Or is there just a better way to achieve what I'm attempting to do with different code?
Any advice would be highly welcome.
I would do this in order to make sure that do_game() runs after style changes:
var myBody = document.getElementById("myBody");
function restart_game() {
myBody.style.backgroundColor = "rgba(255,255,255,1)";
finished=false;
}
myBody.addEventListener("DOMAttrModified", function(e){
if (e.attrName === 'style')
do_game();
});
Explanation: This way, restart_game() function will change style of "myBody" element. When that happens, eventListener attached to "myBody" element will detect style changes and execute do_game() so you'll have their execution aligned.
Currently working on a page containing a video that has to be paused at certain points (like chapters). So I made a function that will stop the video when it hits the next "time marker" which looks like this:
function vidPause(nextMarker){
var timeMarker = nextMarker;
if(videoPlayer.currentTime >= timeMarker) {
videoPlayer.pause();
videoPlayer.removeEventListener('timeupdate', vidPause());
}
};
And I'm trying to fire it this way:
videoPlayer.addEventListener('timeupdate', vidPause(nextMarker));
But it only seems to fire when the video is loaded. Nothing happens when the video is playing (tested by using a console.log(videoPlayer.currentTime); inside the vidPause function).
Note: I need the function to be called that way so that I can remove the event listener when it hits the time marker, that way it won't stop when the user wants to play the video from that point on.
Thanks in advance for any suggestions!
The function is being called once in the addEventListener line, but that's not actually passing it as a callback.
Try this:
function videoUpdate(e) {
vidPause(nextMarker, videoPlayer.currentTime;); // Now call your function
}
function vidPause(nextMarker, timeStamp){
var timeMarker = nextMarker;
if (timeStamp >= timeMarker) {
videoPlayer.pause();
videoPlayer.removeEventListener('timeupdate', videoUpdate);
}
};
videoPlayer.addEventListener('timeupdate', videoUpdate); // Note no brackets, as it's passing a ref to the function rather than calling it
I don't know what the scope of nextMarker is, but you should be able to start console logging and find out.
I want to call a function when the browser opens (or reloads)
If I use:
window.onopen = window.alert("opened");
That works fine however:
window.onopen = winopen;
window.onresize = winopen;
function winopen()
{
alert("opened");
}
Does not. The window.onresize call does work, I'm also using the resize event to call a different function but put it in here just to test whether the function call worked at all as I have the resize event function call working elsewhere.
That's because you're misunderstanding a fundamental thing:
window.onopen = window.alert("opened");
Is assigning window.onopen the result of calling window.alert("opened"), which will call the function regardless.
The second way is the correct way of assigning functions, but there is no such event as onopen.
If you want to call a function on each page load, just call it in your .js file without anything else. The file will be parsed and executed every time the page loads.
So basically, you want:
window.onresize = winopen;
function winopen()
{
alert("opened");
}
winopen(); //Call it now.
In some cases, you may want for the DOM to finish loading (all HTML was parsed, browser is ready for DOM manipulation), in that case, you can use window.onload instead of window.onopen in your example.
This is my html code
Hit
This is my javascript file
function clickHandler(evt) {
var thisLink = (evt)?evt.target:Window.event.srcElement;
alert(thisLink.innerHTML);
return false;
}
But when i click the Hit Link, it redirects.
you need to pass in the event if you wish to preventDefault.
html:
Hit
script:
function runFunction (evt) {
evt.preventDefault();
evt.stopPropagation();
}
To tie both of the very-correct answers together, what's happened is you've inlined a function where you've written onclick="return runFunction();"
If you look at that, what it's really doing is going like this:
var link = document.getElementById("myLink");
link.onclick = function () { runFunction(); };
See the problem?
My runFunction is being called without any event object passed in, at all.
...which means that var thisLink = (evt) ? is going to return false, which means that it's going to try to run in oldIE-mode.
By writing onclick="runFunction", that's the same as saying:
link.onclick = runFunction;
Which means that when the onclick event happens, runFunction will be called, and in W3C-compliant browsers, it will be sent an event object.
Which is why that solution works.
The best way to avoid a lot of this confusion is to deal with JavaScript from inside of JavaScript, and to deal with HTML inside of HTML, so that you don't have to worry about how strings translate into code.
Now, to get all of this to work, AND prevent redirection, you want to do this:
for W3C browsers (the ones that pass the event parameter):
function runFunction (evt) {
// stops the default-action from happening
// means you need to find another way to fire it, if you want to later
evt.preventDefault();
// stops higher-up elements from hearing about the event
// like if you stop a submit button from "clicking", that doesn't stop the form
// from submitting
evt.stopPropagation();
//the oldIE versions of both of these are
event.cancelBubble = true;
event.returnValue = false;
}
When I plugged your code into chrome, I got this as the error in the console:
Uncaught TypeError: Cannot read property 'srcElement' of undefined
IF the javascript bombs out while processing, it never gets a chance to return at all so the browser tends to disregard what is in the onclick handler after the exception.
Since it bombed out... default behavior of anchor tags, which is to send you off to wherever the href says to go.
Try wrapping the contents of the function in a try/catch block and see what turns up if this kind of thing plagues you.