New course! Every coder should learn Generative AI!
Try a free lesson+ 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
24 Answers
+ 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
Hi
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.
0
Gordon Thank you for the information (⌒∇⌒) I'll not do that again...
Often have questions like this?
Learn more efficiently, for free:
Hot today
Strange narrowing conversion error from FLTK Color to Color Struct, Stroustrup's header Graph.h
0 Votes
Effects on HTML and JavaScript
0 Votes
Encryption and Decryption
1 Votes
Izzy the iguana
0 Votes
Any good alternative to do this
2 Votes
Can anyone help me with this?
0 Votes