Develop Reference

window.functionName is undefined in my code while it is defined in the developer tool console

I've tried delaying the code even if I execute window.functionName in the console before the code actually finishes it, I still get the same outcome (works when I directly enter window.functionName in the console but not when being executed from the javascript code).
Note this is all happening in the content-script of a chrome extension.
For full context, I have a Vue component which has a method that calls a function in another javascript file which eventually calls window.functionName -- so something like this:
SomeVueComponent.vue
<template>
<button #click="buttonClicked">
</template>
<script>
import { doSomething } from 'do-something.js';
export default {
...
methods: {
buttonClicked() {
doSomething();
}
}
}
</script>
do-something.js
export function doSomething() {
doFunctionName() {
window.functionName(); // Returns "Uncaught ReferenceError: functionName is not defined"
}
...
whenElementIsShown() {
// When the element was shown a script was injected to the page that sets window.functionName
// to something. I tried putting doFunctionName in a timeout and got the same results.
doFunctionName();
}
}
Whereas in the developer tools console...
window.functionName() // Returns "f (){...}"
I'm just not sure why window would be different in the two cases. Is it because of Vue? Is it some scoping issue? Is there a way to get the most recently updated window?

Turns out the window variable in the chrome extension is different than the page's window variable. More info here: Chrome extension - retrieving global variable from webpage

ReactJS - External JS Function "is not a function"

In short, I'm trying to call an external JS function which my 3rd party required me to include, in order to use their API, but doesn't work as it supposed to.
From what I've read, I am supposed to use, for example, window.extFn() after including the external JS in my index.html which contains the extFn() like so
<script src="https://example.com/external.js"></script> <-- actually not like this, see update 2 as I imported the library locally
...and supposed to use it like how it was answered here: Call external Javascript function from react components regardless of whether the said function is inside a file or simply defined on index.html <script> section. This had worked on the JS file I created for testing this.
//File: test.js
function test() {
return "Hello";
}
...imported the JS file with script tag like usual, and using console.log(window.test()) in my React Component's render() returned Hello.
I tried moving the import to HTML head from body and vice-versa but the error I'm still getting is:
TypeError: window.extFn is not a function
QuickCheckout.render
....
22 | }
23 |
24 | render() {
> 25 | window.extFn({
26 |
View compiled
▶ 20 stack frames were collapsed.
And when I look into my browser console, for some reason I have (which seems to be the key problem)
Uncaught SyntaxError: Unexpected token < external.js:1
Tried console.log(window.extFn) and it returns undefined
So I think it might be possible that the said JS is the problem itself, but I'm at my wit's end with this. Meanwhile I had emailed my 3rd party support team, does anyone have any advice on this? Thank you very much.
UPDATE: Now my test.js file above, which had worked in my experiment, produces the Unexpected token < error as well in my console...
UPDATE 2: I apologize for your problems. But I actually imported the JS from local source due to having to port their library as they had jQuery 2 instead of 3.
<script src="assets/js/external.js"></script>
And to my dumbness, i forgot the trailing /. Thank you for your help.

It seems that the path of external.js is wrong, which returns a html file instead of js file
you can check what the request of external.js returns at the "network" tab in chrome dev-tool

At the begining of file, before the class definition, please add
let extFn = window.extFn
then inside of component,you can use it.
extFn()//call inside component

Javascript: 'window' is not defined

I'm trying to learn JavaScript, but the following code has been giving me a lot of trouble:
window.onload = function () {
for ( var i = 0; i < seats.length; i++) {
for ( var j = 0; j < seats.length; j++) {
document.getElementById(getSeatId(i, j)).onclick = function(evt) {
getSeatStatus(getSeatId(i, j));
};
}
}
document.getElementById("search").onclick = findSeat;
document.getElementById("male_search").onclick = findMaleSeats;
initSeats();
};
It is from an external JS file and it is the only file linked to the page. findSeat, findMaleSeats, getSeatId, and initSeats are all defined a little bit later in the file. When I double click this file, I get the following error:
Windows Script Host
Error: 'window' is not defined
Code: 800A1391
I already tried moving the code to other places in the file, assigning a different function (even an empty function) to window.onload and many other things. It just seems that my computer doesn't know what window is. And if I try to open the HTML in a browser the nothing loads (as one would expect).
Does someone know what is wrong with this?

The window object represents an open window in a browser. Since you are not running your code within a browser, but via Windows Script Host, the interpreter won't be able to find the window object, since it does not exist, since you're not within a web browser.

It is from an external js file and it is the only file linked to the page.
OK.
When I double click this file I get the following error
Sounds like you're double-clicking/running a .js file, which will attempt to run the script outside the browser, like a command line script. And that would explain this error:
Windows Script Host Error: 'window' is not defined Code: 800A1391
... not an error you'll see in a browser. And of course, the browser is what supplies the window object.
ADDENDUM: As a course of action, I'd suggest opening the relevant HTML file and taking a peek at the console. If you don't see anything there, it's likely your window.onload definition is simply being hit after the browser fires the window.onload event.

Trying to access an undefined variable will throw you a ReferenceError.
A solution to this is to use typeof:
if (typeof window === "undefined") {
console.log("Oops, `window` is not defined")
}
or a try catch:
try { window } catch (err) {
console.log("Oops, `window` is not defined")
}
While typeof window is probably the cleanest of the two, the try catch can still be useful in some cases.

"Uncaught SyntaxError: Unexpected token (" but there is no error

I'm authoring a simple userscript that will give the backspace button navigation control like in windows (specifically this is for linux users) for Chromium browser.
This script was working, then I made a few alterations to it (very simple stuff, commenting, tabbing, making it pretty), and now i'm getting this error:
Uncaught SyntaxError: Unexpected token (
on this line
document.head.appendChild(script);
The script is located here - i'm pulling out my hair trying to figure this out.
The script really only applies to chromium as ff gives you a configuration option to enable this functionality..
- Chromium 15.0.874.106 (Developer Build 107270) Ubuntu 11.10
Edit if someone can tell me why this doesn't work that would be great
EmbedCodeOnPage("(function() {" + fn.toString() + "})();"); // fails
EmbedCodeOnPage("(" + fn.toString() + ")()"); // works.

I believe the actual error is here:
function EmbedFunctionOnPageAndExecute(fn) {
EmbedCodeOnPage("(function() {" + fn.toString() + "})();");
}
fn.toString is already going to format your function like this:
function () { /* code here */ }
So you're going to end up with this:
(function() { function () { /* code here */ } })();
This is clearly not what you want. You want to execute the inner function.

because you are just dropping in an anonymous function and not executing it
change line 46 and add ()

I had the same problem, even with simple function. This might be due to incorrect syntax of the function definition itself, especially switching between java to javascript.
if i declare function with in an object definition such as calculateTax(){//some logic;} and run, i get "SyntaxError: Unexpected token (" - this is due to the fact that function declaration is not correct format/syntax. The error is misleading, however by changing it to calculateTax : function(){//some logic;} resolves the issue. Hope this helps. Thanks.

Safari Extension safari.application error

I'm making an extension for safari I created a context item with command = showNote
In debugger I get the follwing error TypeError: Result of expression 'safari.application' [undefined] is not an object on line 8(the last line)
are there any things you need to include or call before this works?
main.js
function showNote(event){
if(event.command == "showNote"){
addElement = document.createElement('<div id="safExtNote"><textarea id="safExtNoteText"></textarea><button id="safExtSave">Save</safExtNote></div>');
document.body.appendChild(addElement)
alert("im online");
}
}
safari.application.addEventListener("command", showNote, false);

Just ran into this problem myself trying to create a toolbar command. Turns out I was putting the JS in the wrong place. I added it to the "Injected Extension Content" as a start script. Needed to create an HTML page that included the JS and set that as the Global Page File.
Switch that around and you should be set, assuming it's the same problem I just ran into.