BUTTONS NOT WORKING | Sololearn: Learn to code for FREE!

+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

1/23/2020 11:39:08 AM

Bia Yumol

26 Answers

New Answer

+7

Can you put it in Code Playground and link it? Diagnosis is impossible without looking at your code.

+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.

+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.

+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...

+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"};

+1

diego Code I'll try that.....

+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..

+1

+1

First id's must start with not numbers, second HTML have many errors you must to validate with validator and id's must have same name in javascript last thing addEventlistener in javascript when document pharsed load js then your elements be visible to javascript if you have in head tag script document.addEventListener("DOMContentLoaded",()=>{ document.getElementById("tut1").onclick = ()=> { // location.href = "tutorial.html" alert("working"); }; });

0

IDK if I can do that considering it's in multiple html files but one js file. Sorry I'm new to this

0

Is your buttons' onclick listeners inside a window.onload = function() { } block? See https://code.sololearn.com/WAZeY9WKb4ZJ/#html

0

Bia Yumol after every location.href("...."); Put } to close function() {

0

diego Code Still won't work

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"};

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>

0

In html: Put class and id names between " " Ej. <button class="les" id="1stlesson">

0

diego Code Oh....

0

diego Code not working

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

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.