Develop Reference

Error ONLY after adding script in the js file for Importing Objects : Cannot read property 'addEventListener' of null ()

I searched but could not find the answer.
I have 3 HTML files (index.html, appointment.html, and admin.html), and I have two js files (app.js [using for appointment.html] and admin.js [using for admin.html]).
I have defined many variables, classes and event listeners inside app.js. One of the event listeners (patientsList.addEventListener('click', function(e){ code }) is specific to an element (patientsList) inside appointment.html, while other event listeners are of type (document.addEventListener('click', function(e){ code }).
I added one script file with src="app.js" at the end of the body inside the "appointment.html". There are no issues with the appointment.html file it's dynamics work perfectly.
I added two script files with src="app.js" followed by src="admin.js" at the end of the body inside the "admin.html" since I have to use many of the variables and classes from the app.js file inside the admin.js.
So I am getting all the variables and objects inside the admin.js file but in the logs, I am seeing an error "Cannot read property 'addEventListener' of null" for patientsList. Obviously, since there are NO patientsList element inside the admin.html file.
So how would I get rid of this error? I appreciate that you read this long question but it was necessary to explain what's going on. Note I want all the variables and objects of app.js inside admin.js, and I could use document.addEventListener which would not give the error but I tend to avoid this because of processor consumption with every click.
Thank you

You cannot transfer variables (data) between 2 pages using vanilla js,
let's say
index.html:
<button onclick="count()">count</button>
index1.html:
<button onclick="count()">count</button>
app.js:
var counter= 0;
function count(){
counter++;
}
the pages don't share the same counter.

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

Riot js using other libraries like jquery with server side rendering

I am trying to use jquery for dom manipulation on mount event of a component like this.
<my-tag>
<p>hi</p>
<script>
this.on('mount',funciton() {
$('.abc').hide();
})
</script>
</my-tag>
This throws an error shown below
TypeError: Cannot read property 'toString' of undefined
at ServerResponse.writeHead (_http_server.js:189:44)
If I replace
$(".abc").hide()
with
console.log("test");
This works perfectly. Any idea why this is happening?
Given below are the version details
Riot version:
riot-cli: 2.3.14 - https://github.com/riot/cli
riot-compiler: 2.3.22 - https://github.com/riot/compiler
Update
This issue happens only if if place it in this.on('mount')
I tried placing it on this.on('all') and it works fine.

I don't think all is a valid Riot event. As for using jQuery on the server, I'd avoid this if possible. If you are hiding an element in your component, then you should be using Riot to switch out a CSS class. If this element is outside your component, you should be emitting events into an outer / global observable / pubsub handler. If you must use jQuery you have to make sure your loading jQuery via Node's require, or using other solutions like DomJS or Cheerio.

Typescript causing syntax error

I am new to typescript and am trying to get a simple class going. I have the below code and when I run, I keep getting a syntax error. I tried even an empty class and nothing.
I am using ASP.NET MVC5 (note, if I just have a function in the code, it works fine).
Inside Site.ts I have:
class Facebook {
constructor() { }
open() {
window.open("http://www.facebook.com");
}
}
var social = new Facebook();
I am calling the code by a link
open
I don't even get to click, right away, when loading I get
JavaScript critical error at line 1, column 1 in http://localhost:20870/Scripts/site.ts\n\nSCRIPT1002: Syntax error
It seems to work in the playground:
Click here to see my workout
Any ideas?

Looks like the browser is trying to execute the TypeScript and not the JavaScript. Double check your <script> tags (or any other thing you are using to load the code e.g. requirejs)

I had the same problem, when using a TypeScript tutorial on www.typescriptlang.org.
I realized that my script tag was referencing the TypeScript file and not the JS file:
<script src="greeter.ts"></script>
instead of:
<script src="greeter.js"></script>

variable assignments using jQuery failing in Safari?

I'm using jQuery 1.3.2 and it's breaking under Safari 4 for mysterious reasons.
All of my javascript references are made right before the tag, yet with the following code:
var status = $('#status');
status.change( function(){ /* ... */ } );
The following error is displayed in the Web Inspector:
TypeError: Result of expression 'status.change' [undefined] is not a function.
However the error is not encountered if I eliminate the variable assignment attach the change method directly like so:
$('#status').change( function(){ /* ... */ } );
Why? I need to use variables for this and several other findById references because they're used many times in the script and crawling the DOM for each element every time is regarded as bad practice. It shouldn't be failing to find the element, as the javascript is loaded after everything except and .

Try changing the variable to something other than "status."
It's confusing your variable with window.status (the status bar text). When I typed var status = $('#status') into the debugging console, the statusbar changed to [Object object]. Must be a bug in Safari.
If you put the code inside a function, so that status becomes a function-local variable, it should work.

It's standard practice in jQuery to wrap things in a
$.onready(function() {
});
This makes sure the DOM is loaded before you try to manipulate it.