I know this is a basic thing but just starting out guys.
So I need to create a form with a set page title, a set main heading, a form input field and enter button. When the enter button is clicked the programme has to inspect the age entered into the input field and display one message if under 17 and another message if 17 or over.
Here is my code - the if function just isn't working - any ideas?
<html>
<head>
<title>Name of set title</title>
<script language="javaScript">
function AgeLimits()
{
if(yourage>=17) document.write("You are old enough to drive");
else document.write("You are too young to drive");
}
</script>
</head>
<body>
<h1>Name of set question</h1>
<p>Please enter your age below</p>
<hr/>
<form name="Name of set question">
<p><input type="text"length="3"name="yourage"></p>
<p><input type="button"value="Enter"onClick="AgeLimits();"></p>
<hr/>
</form>
</body>
</html>
You need to select the element to get the value keyed in by the user:
<html>
<head>
<title>Name of set title</title>
<script language="javascript">
function AgeLimits()
{
var yourage = document.getElementById("yourage").value;
if (yourage >= 17)
alert("You are old enough to drive");
else
alert("You are too young to drive");
}
</script>
</head>
<body>
<h1>Name of set question</h1>
<p>Please enter your age below</p>
<hr />
<form method="post">
<p><input type="text" length="3" id="yourage"></p>
<p><input type="button" value="Enter" onclick="AgeLimits()"></p>
</form>
<hr />
</body>
</html>
This is not a way to get text entered in textfield. The right way is document.getElrmentByName('yourage').value. Since u are checking value of a variable which is not defined your condition always executes else part
The Function should be like this
function AgeLimits()
{
var yourage=document.getElementById("age").value;
if(yourage>18)
window.alert("You are eligible to vote");
else
window.alert("You are not eligible.Sorry")
}
Add a attribute id="age" to the text input !
Related
Hi guys im trying to make a form which when the user enters two values that are the using an f statement same with an onsubmit event handler. that then shows an alert message if they match. my problem is im not seen onsubmit pop up. or an alert i dont know where im going wrong please help.
function nameCheck(){
let fname = document.querySelector("#fname").value;
let fname2= document.querySelector("#fname2").value;
if (fname1 = = fname2){
alert("The names match ");
} else if{
alert("They dont match ");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> nameCheck</title>
<script src="java/nameCheck.js" type="text/javascript"></script>
</head>
<body>
<form action= "">
Name: <input type="text" id ="fname" name="fname">
<br><br>
RenterName: <input type="text" id ="fname2" name="fname2">
<br>
<div class = "buttons">
<input type="submit" onclick()= "nameCheck()" name = "submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>
</body>
</html>
Where to begin...
there is no onclick()="" attribute for elements, it's onclick=""
you have a space between = =
there is no fname1 variable defined
you don't have a condition after else if
if you are using alert() just for your own debugging purpose, use console.log() instead, it will save you time in a long run.
Here is the fixed code:
function nameCheck(){
let fname1 = document.querySelector("#fname").value;
let fname2= document.querySelector("#fname2").value;
if (fname1 === fname2){
alert("The names match ");
} else{
alert("They dont match ");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> nameCheck</title>
<script src="java/nameCheck.js" type="text/javascript"></script>
</head>
<body>
<form action= "">
Name: <input type="text" id ="fname" name="fname">
<br><br>
RenterName: <input type="text" id ="fname2" name="fname2">
<br>
<div class = "buttons">
<input type="reset" value="Reset">
<input type="submit" onclick= "nameCheck()" name = "submit" value = "Submit">
</div>
</form>
</body>
</html>
Variables
So first, in the if(fname1 = = fname2), and the variable creation, fname and fname1 do not match. Change either one so it matches the other.
if() stuff
This is the equality sign: === and you did = =. The space has to be a equal sign.
Also, the else if() is only when you want multiple if()s. else should be used for this program.
HTML Attribute
The onclick() should be onclick.
I have two numbers, 20 and 0.
My code is supposed to display an alert box based on either of two numbers entered and submitted. But nothing happens once I click submit when I enter either of the two numbers.
Not sure if form action attribute is the reason but it's a single page html document named compact.html, hence the value of the action attribute.
<!DOCTYPE html>
<html>
<head>
<title>Check PIN</title>
<script type="text/javascript">
function userCode {
if (document.registration.pincode.value == "20") {
alert("Congrats, you passed!");
document.registration.pincode.focus();
return false;
}
if (document.registration.pincode.value =="0") {
alert("Sorry, you failed!");
document.registration.pincode.focus();
return false;
}
return (true);
}
</script>
</head>
<body>
<form action="compact.html" name="registration" onsubmit = "return(userCode());">
<label>Please enter your PIN:</label><br>
<br>
<input type="text" name="pincode"><br>
<br>
<input type="button" name="Submit" value="Submit">
</form>
</body>
</html>
you could use html's onclick event to fire the JS function; for that the following line needs to change :
<input type="button" name="Submit" value="Submit">
with following:
<input type="button" name="Submit" value="Submit" onclick="userCode()">
Note: You can always debug your code on Browser console (By Pressing function key - f12)
How do you make a simple-answer question form in js?
I tried
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<script>
function cipher1(){
var val ="theanswer";
if(val == (document.getElementById("cipher1").value)){
alert("correct");
}
}
</script>
</head>
<body id="bod">
<div id="cipher1"style="display:none;">
<input id="cipher1"type="text" value="write the answer here"/>
<input type="button" class="but"value="answercheck"onclick="cipher1()"/>
</div>
</body>
</html>
But it doesn`t work.
please help!!!
Your Id must be unique. In your code you are associating 'cipher1' with div and input field. You can change to Id of the text field to cipher2. See the code below:
function cipher1(){
var val ="theanswer";
if(val == (document.getElementById("cipher2").value)){
alert("correct");
}
}
<div id="cipher1">
<input id="cipher2"type="text" value="write the answer here"/>
<input type="button" class="but"value="answercheck"onclick="cipher1()"/>
</div>
Try first to change the two duplicates ID
div id="**cipher1**"style="display:none;">
<input id="**cipher1**"type="text" value="write the answer here"/>
Than remove display style from the parent div
You have a duplicate id on page (you can have only one id on page) cipher1
I would like to have my code check if one or more check boxes have been selected in a list of check boxes. If no check boxes have been selected then I would like a window.alert to pop up saying "please select at least one interest". Currently all it does is alert that nothing has been checked even if you check a box.
My code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>Web Site Registration Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function confirmSubmit(){
if(document.forms[0].interests.checked) {
{window.alert("Thank you");}
} else {
{window.alert("Select at least one preference");
}
return false;}
return true;
}
</script>
</head>
<body>
<h1>Web Site Registration Form</h1>
<h2>Personal Information</h2>
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit()">
<p>Select areas of interest (select at least one)</p>
<p><input type="checkbox" name="interests"
value="entertainment">Entertainment<br />
<input type="checkbox" name="interests"
value="business">Business<br />
<input type="checkbox" name="interests"
value="music">Music<br />
<input type="checkbox" name="interests"
value="shopping">Shopping<br />
<input type="checkbox" name="interests"
value="travel">Travel</p>
<p><input type="submit"></p>
</form>
</body>
</html>
Note: The extra code in the header is there to submit all data entered to a page which shows what has been submitted. This is my first post so feel free to let me know what other information may help. Thanks!
Add your script tag below the form, you can use this to pass the form to your call back. Use querySelector for :checked to search inside the form for a checked input.
<script type="text/javascript">
function confirmSubmit(form){
if(form.querySelector(":checked")) {
window.alert("Thank you");
return true;
} else {
window.alert("Select at least one preference");
return false;
}
}
</script>
You can pass the form to your call back by updating your onclick listener;
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded"
onsubmit="return confirmSubmit(this)">
Here is the fiddle.
With jQuery you can do this:
function confirmSubmit(){
$('input').each(function(index, item) {
if(item.checked){
return true;
}
});
}
I'm trying to compare a randomly generated number to a number input by the user (via a form in HTML). The JavaScript function executes instantly when the page is loaded, rather than waiting for the user to enter a number in the form. Also the form input does not seem to be doing anything.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hot Or Cold</title>
<script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div id="gameBox">
<p>Enter a number between 1 and 100</p>
<input type="text" name="userinput" id="userinput" maxlength="3" autocomplete="off"/>
<input type ="submit" name="submit" id="submit" class="button"/>
</div>
</form>
</body>
</html>
and my JavaScript code:
var computer = Math.floor(Math.random()*100);
var user = document.getElementById("#userinput");
function game(user, computer){
if (user == computer) {
alert("You picked the correct number!");
}
else if (user > computer) {
alert("Too high.");
}
else if (user < computer) {
alert("Too low.");
}
}
game();
It is not working how you expect because your submit button doesn't do anything, and you are in fact calling your function when the page loads.
Remove the last line of our JavaScript, the call to
game();
Change your submit button to this
<input type=button onclick=game(); class=submit value=Submit>
Remove the closing
</form>
tag since you have no opening form, but you dont need one.
Also to get the input number
var user = parseFloat(document.getElementById("userinput").value);
Since js does not use hash before ids like jquery, and form values are all strings until they are parsed.
You need to use an event handler so that your function is called when the form is submitted, like so:
document.getElementById('myform').addEventListener('submit', function(e){
var user = document.getElementById("userinput").value;
game(user, computer);
e.preventDefault();
});
I fixed your code in this JSFiddle.
i'm writing the entire code hope you get it.
<!DOCTYPE html>
<html>
<head>
<body>
<h1> Game </h1>
<input type="number" id="id1">
<button type="button"
onclick=" game()">
Click me.</button>
<script>
var computer = Math.round(Math.random()*100);
console.log(computer);
var user=document.getElementById('id1').value;
function game(){
if(user == computer)
{
alert("yay! Good Work");
}
else{
alert("Sorry Not Matched");
}
}
</script>
</body>
</head>
</html>