I need help with my website trying to program buttons for when I click them.
If I’m being completely honest, I have absolutely no idea what’s going on in your HTML file.
Sooo, here’s some HTML you can change to fit with yours:
<body>
<button id="login-btn"><img src="login-button-blue-hi.png"></button>
<script src="script.js"></script>
</body>
script.js:
const login_btn = document.getElementById('login-btn');
function login() {
// do something
}
login_btn.onclick = login; // the login function will be called when the button is clicked
Hope this helped.
2 Likes
thank you so much!smile:
1 Like
It’s better practice to do this:
// you should always declare your variables using let, or const
// (you could also use var but generally you can use let or const
// in any circumstance you can use var and that's better practice)
const login_btn = document.getElementById("login-btn");
const register_btn = document.getElementById("register-btn");
// it's better practice to add an event listener than to set the
// on<event> callback functions
login_btn.addEventListener("click", function(e) {
e = e || window.event;
// handle the click event here
});
register_btn.addEventListener("click", function(e) {
e = e || window.event;
});
Also, I looked at your code, document.write is bad practice. Instead, either create an element in your HTML and access it within the JavaScript and set it’s textContent, or create the element in JavaScript using document.createElement, set it’s textContent, then append it to the DOM.
Also, you have document.write(helloworld);, I believe you intended to write: document.write("helloworld");. The quotation marks tell the code that the text is a string, otherwise you are attempting to access a variable named helloworld (which does not exist as far as I can tell, in which case would result in an error).
1 Like
Thank you so much you are a great help
2 Likes
Right, as a Python programmer, I forgot to use let or const while declaring variables. And thanks for the tip!
When I try to click the register button nothing happens
https://replit.com/@FireSqurriel/QuietCarpalDemands#script.js
Even better if you:
<body>
<button id="login-btn" onclick="login()"><img src="login-button-blue-hi.png"></button>
<script src="script.js"></script>
</body>
function login() {
console.log('Logged In!');
}
It’s better practice to use event listeners rather than the on<event> methods.
1 Like
You’ve added the script twice, on lines 24 and 29. Remove the one on line 24.
What happens is the first time you add the script, the second button doesn’t exist yet causing an error when you try to listen to the click event. The the second time, the variables have already been declared so it’s like trying to r edclare them so that causes an error.
You should only ever add a script once, generally you add them in the head (if they don’t access the DOM for example like a library, or if they do, use the defer attribute), or somewhere near the bottom of the body.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.