Hey guys, I am new to Ionic 4, after I created my first project, I followed the steps of the tutorial. And He deleted the project structure by building up a new HTML file and Javascript file to show it is still runnable. However, when I created exactly the same .js file as what he simply did at 1:37:00 in the video.
`
const usrnmInput = document.querySelector(’#input-usrnm’);
const pswrdInput = document.querySelector(’#input-pswrd’);
const signupBtn = document.querySelector(’#btn-signup’);
const loginBtn = document.querySelector(’#btn-login’);
loginBtn.addEventListener(‘click’, () => {
const enteredUsrnm = usrnmInput.value;
const enteredPswrd = pswrdInput.value;
if(
enteredUsrnm.trim().length <= 0 ||
enteredPswrd.trim().length <= 0
){
return;
}
console.log(enteredUsrnm, enteredPswrd);
});` Then when I try to run in the chrome inspect tool, I couldn’t get the log message that wrote in this js file. and it pops me the error message that Uncaught ReferenceError: the document is not defined.
Do you guys know how could I fix this? I guess I shouldn’t create a Js file and should write it inside home.page.ts but I don’t know what it is and can’t start on it, and the tutorial didn’t cover much about it. Can someone please help me with this? Thank you so much!
@siiulan can you show your index.html file and your .js file please?
Thank you for your reply! This what I did for the HTML file:
and I used a script to build connections with my .js file and here is how my js file look like:
btw, my app/src folder look like this:
It doesn’t have .js file by default so I made it my tutorial. What do those .ts file work? May I put those statement execution into any .ts file if .js should not appear here? Thank you!
@siiulan Sorry for late response I have been quite busy this days!
Ok some things I noticed:
In the video:
He is creating just a index.html file and a app.js file. He is explaining that you need nothing else to use ionic. You can use ionic with pure html(index.hml) and vanilla javascript(app.js file).
If you can see he has no “project or app” structure because he is not using any framework at all.
In your code:
-
You are using angular: It means you are using a framework to control the logic of your app insted of using vanilla javascript(though under the hood angular is using it for you) so there is no point for you to create the app.js file in there. use Angular.
-
Inside your index.html you have no <script src=“long_url_here…”> on the top of your file in your header just like in this moment of the video https://youtu.be/r2ga-iXS5i4?t=4921
Again this is because I believe you are using the home.page.html file generated by ionic for you. As you can see in your file you have no ** <script src> **… on the top. Ionic and angular is handling all that in the background for you so that is why you dont see it on the top. The base structure of your app is handled in the index.html file in your project structure. Search for it in the bottom.
So what can you do? Simple:
-
create a folder anywhere you want, not in the angular project. Could be in your desktop for exmaple: myApp
-
create index.html file just like normal website and be sure to add ionic script sources on the header of your file and add code in there
-
create app.js file and add code in there.
That should do the job.
Think about ionic for styling just like bootstrap or AngularMaterial.
Think about Angular or react or vuejs or vanillaJs as your project logic.
Hope it helps! Anything else let me know
1 Like
@siiulan please accept the solution if everything ok! thanks
Thank you for your careful reply! you help me figure out my problem just in half a day and It really helps! I do think in the pic of my HTML file, I made a at the very bottom. But I see what you saying! Since I am using an angular framework, I should write these statements in the angular framework file instead of a javascript file! I have a question on how to use the angular file. In this project and inside my src/app/home, would you mind walking me briefly on how each file takes charge of what? I found no tutorial and ionic4 documentation talk about how these files work with each other, and I am new to ionic 4 and angular, so if I want to write the same statement that I wrote in my js file, what f.ts file should I write in? Thank you and please have a good weekend 
@siiulan Ok this is not question related comment since I believe I have answered your question but Ill try help in what I can:
- do you have knowledge in angular?
sorry, I didn’t know we have solution function that needs to click, first time posting question in this forum! Thank you!
Nope, but I did a little bit self-study of tutorial online before start this project!
Please take the time to go through the Tour of Heroes before you do anything else. It is absolutely crucial to ground yourself in official documentation before you seek out alternative sources of information, because otherwise it will simply be impossible for you to be able to judge the reliability of other resources out there.
@siiulan Ok understand. Please before you start any project or even the tutorial by Max that you are watching I suggest going through a angular course or as @rapropos suggest the official documentation is always the best option. Also if you have limited javascript knowledge please also study this first before start working with a framework. You will then see how everything connect together! If after reading docs and watching some tutorials you need any help send me a message and ill help in anything related with html, css, vanillajs, angular, ionic.
Good luck!
