+ 1

BUTTONS NOT WORKING

My first button worked just fine but my second to last doesn't. I used document.getElementById("1stlesson").onclick = function () { location.href = "lessons.html"}; I made sure I put the id in the proper place same with the location. Also, I use the same javascript dile for multiple html files. Please help. This project in computer is due tomorrow

23rd Jan 2020, 11:39 AM
Bia Yumol
Bia Yumol - avatar
25 Respuestas
+ 7
Can you put it in Code Playground and link it? Diagnosis is impossible without looking at your code.
23rd Jan 2020, 11:51 AM
Fermi
Fermi - avatar
+ 5
Bia Yumol Well, without the code, the only advice I can give is to start diagnosing from a minimal sample. https://code.sololearn.com/WaPImcARsJ49/?ref=app The code above clearly shows that both buttons are responsive. Try adding stuff according to what you have in your files until the buttons fail, then try to deduce what went wrong. That's how I usually debug my issues.
23rd Jan 2020, 12:18 PM
Fermi
Fermi - avatar
+ 3
You must separate JavaScript files for different html files. Otherwise the getElementById will return null and those onclick will raise Exceptions. (Which you should be able to see when you are in console of Developer's tool). Here are the steps: Install a proper IDE such as Visual Studio Code which will do the indentations for you. Restart your project with blank files, add the listeners one by one. Switch on Chrome Developer's Tool, read the console error message. To post code in Q&A, use code playground. https://www.sololearn.com/post/75089/?ref=app If you want to hyperlink to another page, use <a href=""> instead.
23rd Jan 2020, 2:12 PM
Gordon
Gordon - avatar
+ 2
Another one: Tags in html must be "nested" I.e. good: <div> <p>one </p> </div> BAD: <div> <p>one </div> </p> Clean up your html... i.e. here <header> <body> <div class="topbar"> <center> <p>Tutorials</p> </center> </header> </div> you are closing header before closing div... and body should be opened first...
23rd Jan 2020, 2:00 PM
unChabon
unChabon - avatar
+ 1
Fermi. Problem still persists. However, this is what the Javascript looks like document.getElementById("tut").onclick = function () { location.href = "tutorial.html"}; document.getElementById("tutor").onclick = function () { location.href = "tutorial.html"}; document.getElementById("1stlesson").onclick = function () { location.href = "lessons.html"}; document.getElementById("back").onclick = function () { location.href = "HP.html"}; document.getElementById("tut").onclick = function () { location.href = "tutorial.html"}; document.getElementById("startgame").onclick = function () { location.href = "quiz.html"};
23rd Jan 2020, 12:33 PM
Bia Yumol
Bia Yumol - avatar
+ 1
diego Code I'll try that.....
23rd Jan 2020, 12:41 PM
Bia Yumol
Bia Yumol - avatar
+ 1
No... Of course... :) Look carefuly... If you have document.getElementById("back").onclick = function () { location.href = "HP.html"}; You must have an element with id="back" A lot of ids are missing in html..
23rd Jan 2020, 1:43 PM
unChabon
unChabon - avatar
+ 1
Hi
25th Jan 2020, 7:30 AM
Sadam Hussain
0
IDK if I can do that considering it's in multiple html files but one js file. Sorry I'm new to this
23rd Jan 2020, 12:03 PM
Bia Yumol
Bia Yumol - avatar
0
Is your buttons' onclick listeners inside a window.onload = function() { } block? See https://code.sololearn.com/WAZeY9WKb4ZJ/#html
23rd Jan 2020, 12:33 PM
unChabon
unChabon - avatar
0
Bia Yumol after every location.href("...."); Put } to close function() {
23rd Jan 2020, 12:49 PM
unChabon
unChabon - avatar
0
diego Code Still won't work
23rd Jan 2020, 12:56 PM
Bia Yumol
Bia Yumol - avatar
0
document.getElementById("tut").onclick = function () { location.href = "tutorial.html"}; document.getElementById("tutor").onclick = function () { location.href = "tutorial.html"}; document.getElementById("1stlesson").onclick = function () { location.href = "lessons.html"}; document.getElementById("back").onclick = function () { location.href = "HP.html"}; document.getElementById("tut").onclick = function () { location.href = "tutorial.html"}; document.getElementById("startgame").onclick = function () { location.href = "quiz.html"};
23rd Jan 2020, 12:59 PM
Bia Yumol
Bia Yumol - avatar
0
<!DOCTYPE html> <html> <head> <title> MaxFluency Tutorials Page</title> <meta name="viewport" content="width-device-width"> <link rel="stylesheet" href="tutorial.css"> <script type="text/Javascript" src="hp.js"> </script> </head> <header> <body> <div class="topbar"><center> <p> Tutorials</p> </center> </header> </div> <div class="lessons"> <center> <button class=les id=1stlesson> <h3> Lesson 1: </h3> Nature of Communication </button> <button class=les id="2nd"> <h3>Lesson 2:</h3></button> <button class="les" id="3rd"> <h3>Lesson 3:</h3></button> </center> </div> <div class="nav"> <center> <button class="loc"> Home</button> <button class="loc"> Highscores </button> <button class="loc"> Support us!</button> </center> </div> <script type="text/Javascript" src="hp.js"> </script>
23rd Jan 2020, 12:59 PM
Bia Yumol
Bia Yumol - avatar
0
In html: Put class and id names between " " Ej. <button class="les" id="1stlesson">
23rd Jan 2020, 1:32 PM
unChabon
unChabon - avatar
0
diego Code Oh....
23rd Jan 2020, 1:33 PM
Bia Yumol
Bia Yumol - avatar
0
diego Code not working
23rd Jan 2020, 1:34 PM
Bia Yumol
Bia Yumol - avatar
0
diego Code Well, I put that id in another html file... That's why I've been wondering if having one js file for multiple html files is okay tbh
23rd Jan 2020, 1:46 PM
Bia Yumol
Bia Yumol - avatar
0
diego Code Since I only have one button working, I got curious a bit and removed the css from the link of the first html file. When I did that, the button completely stopped working. When I brought it back, it didn't work at all anymore.
23rd Jan 2020, 2:11 PM
Bia Yumol
Bia Yumol - avatar
0
Gordon Thank you for the information (⌒∇⌒) I'll not do that again...
23rd Jan 2020, 2:16 PM
Bia Yumol
Bia Yumol - avatar