Troubles executing verbs from Javscript

ID:1823146
 
Apr 2 2015, 11:14 am
(See the best response by Ter13.)
Browser Code:
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<STYLE>
video {
  right: 0;
  bottom: 0;
  min-width: 50%;
  min-height: 50%;
  max-width: 90%;
  max-height:90%;
  width: auto;
  height: auto;
</STYLE>
</HEAD>
<BODY BGCOLOR=black>
<center><video width="853" height="480" autoplay="autoplay">
  <source src="file:///C:/Program Files/NARUTO SHIPPUDEN Ultimate Ninja STORM 2/IntroMovie.mp4" type="video/mp4" />
  Your browser does not support HTML5 video.
</video></center>
<SCRIPT TYPE="text/javascript">
document.addEventListener("onclick", function(){
    window.location = "byond://winset?command=skipIntro";
});
document.addEventListener("oncontextmenu", function(){
    window.location = "byond://winset?command=skipIntro";
});
document.addEventListener("onkeypress", function(){
    window.location = "byond://winset?command=skipIntro";
});
</SCRIPT>
</BODY>
</HTML>


Client Code:
client
    var/intro=0;
    verb
        skipIntro() {
            intro=1;
            src << browse(null,"window=output1");
            winshow(src,"default.output1",0);
        }


For some reason when I call 
src << browse(null,"window=output1");
winshow(src,"default.output1",0);
through the default window it works fine, but when the output itself calls that verb it won't work.

Just to clarify, is the problem with this the fact that the verb skipIntro() isn't being called by the Javascript because of document.addEventListener or is it a different problem?
Apr 2 2015, 11:21 am
Try putting an alert() in your event handlers to see if they're being called at all. I'd also recommend putting some kind of debug output in skipIntro to tell if it's being called.
Apr 2 2015, 11:27 am (Edited on Apr 2 2015, 11:32 am)
In response to Lummox JR
Lummox JR wrote:
Try putting an alert() in your event handlers to see if they're being called at all. I'd also recommend putting some kind of debug output in skipIntro to tell if it's being called.

Actually, I forgot to mention my second step was to add alert() into the verb skipIntro(), which doesn't seem to show.
        skipIntro() {
            intro=1;
            src << browse(null,"window=output1");
            winshow(src,"default.output1",0);
            alert("YUP");
        }

I wasn't sure if it was because the window was on fullscreen and the alert box was under it. That was, until I added the alert box onto the Javascript like so:
document.addEventListener("onclick", function(){
    alert("Hello! I am an alert box!!");
    window.location = "byond://winset?command=skipIntro";
    alert("Hello! I am an alert box!!");
});
document.addEventListener("oncontextmenu", function(){
    alert("Hello! I am an alert box!!");
    window.location = "byond://winset?command=skipIntro";
    alert("Hello! I am an alert box!!");
});
document.addEventListener("onkeypress", function(){
    alert("Hello! I am an alert box!!");
    window.location = "byond://winset?command=skipIntro";
    alert("Hello! I am an alert box!!");
});

I can definitely say for sure that the EventListeners aren't being called for some reason. I tried clicking outside the video and inside the body, inside the body and inside the video, pressing number/letter/arrow keys, and right-clicking. Apparently right-click brings up the context menu.

Is there any reason why these event listeners aren't being called possibly?
EDIT: Edited above to clarify what I meant about adding a code.
Apr 2 2015, 11:35 am
Best response
What's probably happening is that at the time that your script is run, the DOM isn't loaded yet.

Move the script tag outside of the body element, then use document.body instead of document. If that doesn't work, I've got other ideas.
Apr 2 2015, 11:39 am
In response to Ter13
 
<script type="text/javascript">
document.body.addEventListener("onclick", function(){
    alert("Hello! I am an alert box!!");
    window.location = "byond://winset?command=skipIntro";
    alert("Hello! I am an alert box!!");
});
document.body.addEventListener("oncontextmenu", function(){
    alert("Hello! I am an alert box!!");
    window.location = "byond://winset?command=skipIntro";
    alert("Hello! I am an alert box!!");
});
document.body.addEventListener("onkeypress", function(){
    alert("Hello! I am an alert box!!");
    window.location = "byond://winset?command=skipIntro";
    alert("Hello! I am an alert box!!");
});
</script>

After moving it above the <body> tag, it gives a script error on addEventListener() claiming document.body is undefined or null. Should I try and use window.onload = function(), place the instructions inside, then use window instead of document.body?
Apr 2 2015, 11:41 am
Sorry, I should have clarified. It needs to be below the body tag, so the body tag loads before the script tag.

Also, it's irrelevant whether you use window or document.body, as the only space that responds to DOM events is within the body anyway in your case.

I tend to recommend the window.onload event for anything that depends on getting properties of elements within the DOM, but you can do without for some examples. Also, you might want to prevent event bubbling, prevent the default action, and return 0 at the end of each of those events.

Searching stack overflow regarding javascript/CSS/HTML issues is your best bet for answering questions regarding this stuff too. Don't neglect stack overflow. Trust me, countless people have had your exact problem and gotten an answer on Stack Overflow. It's a great resource. In fact, almost every question I ever look up on that site regarding JS is marked as a duplicate.
Apr 2 2015, 11:46 am
In response to Ter13
Ter13 wrote:
Sorry, I should have clarified. It needs to be below the body tag, so the body tag loads before the script tag.

For some reason that doesn't do it either, nor does using window.onload. I even tried running the HTML file in my browser and it doesn't call there as well.

Also, you might want to prevent event bubbling, prevent the default action, and return 0 at the end of each of those events.
Searching stack overflow regarding javascript/CSS/HTML issues is your best bet for answering questions regarding this stuff too.
Okay, I'll be sure to do that. I wasn't sure if the problem existed in the BYOND code or Javascript, so I posted here first to be sure.
Apr 2 2015, 12:20 pm
Well, first of all, what version of IE do you have installed on your machine? What browser did you try to run it in?
Apr 2 2015, 12:21 pm
I would tend to think the DOM load is a red herring. Although the whole DOM hasn't loaded yet by the time the script runs, the document element is definitely available.
Apr 2 2015, 12:22 pm
In response to Ter13
Ter13 wrote:
Well, first of all, what version of IE do you have installed on your machine? What browser did you try to run it in?

Actually, the issue was fixed through stackexchange. The problem persisted because I was using "onclick" when I should just use "click". Also keydown is better to use than keypress when it comes to this.

Also, I experimented some more and found window.onload = function() {} and replacing document.body with window was better to use for my instance since the body only contained the video and not the entire window.

Edit: Oh yeah, and to answer those questions: I have the latest IE since it comes with Windows 8.1 and I used Chrome for some of the testing earlier, which is most likely the wrong way to handle it since BYOND uses IE.

Lummox JR wrote:
I would tend to think the DOM load is a red herring. Although the whole DOM hasn't loaded yet by the time the script runs, the document element is definitely available.
Ninja'd?

Ter13 wrote:
What's probably happening is that at the time that your script is run, the DOM isn't loaded yet.
Move the script tag outside of the body element, then use document.body instead of document. If that doesn't work, I've got other ideas.
Apr 2 2015, 12:24 pm
Since all your handlers are identical, try making them a single function called skipIntro(). That will make your code a little cleaner too.

Then, try something like this at the bottom of the script:

setTimeout(skipIntro, 5000)

If the verb still isn't called after that 5s delay, then something is going amiss with the verb call from JS itself.
Apr 2 2015, 12:24 pm
In response to GameAnalysis
GameAnalysis wrote:
Actually, the issue was fixed through stackexchange. The problem persisted because I was using "onclick" when I should just use "click". Also keydown is better to use than keypress when it comes to this.

Oh sheesh, I didn't even notice the "on". Yep, that explains everything.
Apr 2 2015, 1:11 pm
In response to Lummox JR
Lummox JR wrote:
GameAnalysis wrote:
Actually, the issue was fixed through stackexchange. The problem persisted because I was using "onclick" when I should just use "click". Also keydown is better to use than keypress when it comes to this.

Oh sheesh, I didn't even notice the "on". Yep, that explains everything.

Yeah, that escaped me too. Unfortunately, browser vendor differences to the method of adding events have made that particular slip-up really easy to miss. You get so used to writing IE7/IE8 code, and you get used to seeing those.

I tend to use shims for this kind of thing anyway, so I haven't directly manipulated event handlers in a while.