Is there a way to make a function check values?
Question
Its me again!
I am trying to find a value of a input and check if the value is a certain string after a button is pressed. It is confusing, but here is my code:
var codeenter = document.getElementById("code") console.log("Script") function check() { var codecheck = codeenter.value; console.log("Started, you have clicked it.") if (codecheck === "109843") { document.getElementById("wel").innerHTML = "Hey, Sam King" } }
#title { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: xx-large; text-align: center; } html { font-family: Verdana, Geneva, Tahoma, sans-serif; text-align: center; } #button { width: 20em; height: 2em; background-color: aliceblue; border: none; } #name { text-align: center; object-position: center; margin: auto 0px; } #code { text-align: center; } #emsub { background-color: aquamarine; border: none; width: 10em; height: 2em; }
<!DOCTYPE html> <title>Emergency Login</title> <link rel="stylesheet" href="./style.css"> <body> <form action="./emergencysucess.html"> <input type="text" id="code" placeholder="Emergency Code"> <input type="text" id="name" placeholder="Your Name"> <br> <button type="submit" id="emsub" onclick="check">Login</button> </form> </body> <script src="./script.js"></script>
That all works, although I dont think the onclick="check" works since it doesnt even run the function because as you can see in the code it is supposed to log something but it doesnt even log that so Im a bit confused.
There is no other error messages apart from that and "emergencysucess.html" is a file.
Could you help?
Dont be confused, it does log script at the start of the .js file.
Thanks!
2 answers
solution1
0 2021-06-24 18:23:45
You have 2 reasons for why this is not working:
- In
onclickyou don't write a function, you need to call the function. - When you use
type="submit"the html will try to send the form to youraction. If you don't want that to happen, you need toreturn falsefrom theonclick.
var codeenter = document.getElementById("code") console.log("Script") function check() { var codecheck = codeenter.value; console.log("Started, you have clicked it.") if (codecheck === "109843") { document.getElementById("wel").innerHTML = "Hey, Sam King" } }
#title { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: xx-large; text-align: center; } html { font-family: Verdana, Geneva, Tahoma, sans-serif; text-align: center; } #button { width: 20em; height: 2em; background-color: aliceblue; border: none; } #name { text-align: center; object-position: center; margin: auto 0px; } #code { text-align: center; } #emsub { background-color: aquamarine; border: none; width: 10em; height: 2em; }
<form action="./emergencysucess.html"> <input type="text" id="code" placeholder="Emergency Code"> <input type="text" id="name" placeholder="Your Name"> <br> <button type="submit" id="emsub" onclick="check(); return false">Login</button> </form> <div id="wel"></div>
solution2
0 2021-06-24 18:32:29
You need to use event.preventDefault() to stop the default action of the submit button.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
var codeenter = document.getElementById("code") console.log("Script") function check(event) { event.preventDefault(); var codecheck = codeenter.value; console.log("Started, you have clicked it.") if (codecheck === "109843") { document.getElementById("wel").innerHTML = "Hey, Sam King" } }
#title { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: xx-large; text-align: center; } html { font-family: Verdana, Geneva, Tahoma, sans-serif; text-align: center; } #button { width: 20em; height: 2em; background-color: aliceblue; border: none; } #name { text-align: center; object-position: center; margin: auto 0px; } #code { text-align: center; } #emsub { background-color: aquamarine; border: none; width: 10em; height: 2em; }
<!DOCTYPE html> <title>Emergency Login</title> <link rel="stylesheet" href="./style.css"> <body> <form action="./emergencysucess.html"> <input type="text" id="code" placeholder="Emergency Code"> <input type="text" id="name" placeholder="Your Name"> <br> <button type="submit" id="emsub" onclick="check(event)">Login</button> </form> <p id="wel" /> </body> <script src="./script.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.