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>
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)
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 !
I'm trying to make a form where you input a number to a textbox and based upon that a text response is put in a textbox.
This is an example of what I have been trying to make work:
<html>
<head>
<script type="text/javascript">
function calculate()
{
var ph = document.test.ph.value;
if (ph > 7.45) {
var str = "Alkalosis";
}
else if (ph < 7.35) {
var str = "Acidosis";
}
else {
var str = "Normal";
}
document.test.acidalk.value = str;
}
</script>
</head>
<body>
<form name="test">
pH<input type="textbox" name="ph"><br>
<input type="submit" value="Calculate"><br>
<input type="textbox" id="acidalk" >
</form>
</body>
</html>
The idea of what I'm trying to achieve is if a number higher than 7.45 is put in the first text box, the button clicked, then the word "Alkalosis" is put in the second text box, but if the number is less than 7.35, the word is "Acidosis" instead.
Any help would be greatly appreciated
Well, you're most of the way there. Instead of having the button be a submit button, try
<input type="button" onclick="calculate();" value="Calculate" />
Base of your code This will be a way to do it:
<html>
<head>
<script type="text/javascript">
function calculate(){
var ph = document.getElementById('ph').value;
if(ph > 7.45){
var str="Alkalosis";
}else if(ph < 7.35){
var str="Acidosis";
} else{
var str="Normal";
}
document.getElementById('acidalk').value =str;
}
</script>
</head>
<body>
pH<input type="textbox" name="ph"><br>
<button onclick="calculate()">Calculate</button>
<input type="textbox" id="acidalk" >
</body>
</html>
hope helps!
You have the form, you have the function, you just need a way to tie them together. Do it by assigning calculate() as an event handler for the form's submit event. Make sure to return false else the form will be submitted and the result of calculate() will not be seen.
<form name="test" onsubmit="calculate(); return false">
jsfiddle.net/UhJG2
Binding to the form's submit event rather than button's click event has the added benefit of calling the function when enter is pressed. It also ensures the form is not ever accidentally submitted.
With jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>pH
<input type="textbox" name="ph" id="ph">
<br>
<button id="calculate">Calculate Acid Level</button>
<br />
<input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
$("#calculate").click(function () {
var ph = $("#ph").val();
if (ph > 7.45) str = "Alkalosis";
else if (ph < 7.35) var str = "Acidosis";
else var str = "Normal";
$("#acidalk").val(str);
});
</script>
</html>
I want to create a simple form with only an input textbox and search button.
A person would type in the search term in the box and press search.
All that will do is take their search term and add it to the end of the url.
So if search term is "good italian food" the submit button would send the user to http://domain/find/good italian food
Whats the simplest way to do this?
Thank you!
<html>
<head>
<script type='text/javascript'>
function Search() {
var keyword = document.getElementById("keyword").value;
var url = "http://yourwebsite.com/find/"+keyword;
window.location = url;
return false;
}
</script>
</head>
<body>
<form name="search">
<input type="text" name="keyword" id="keyword" />
<input type="button" name="btnser" onclick="Search()" value="Search" />
</form>
</body>
</html>
I'd also suggest using encodeURI() to make it 'safe'.
http://www.w3schools.com/jsref/jsref_encodeuri.asp
use javascript and html form
create a form with a button and text box
in the post of the form call the javascript function to create the url with the user input text
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function redirect(){
var s = document.getElementbyID("txt").value;
var url="http://url.com/" + s;
window.location = url;
}
</script>
</head>
<body>
<form>
<input type=''></input>
</form>
</body>
</html>
you could override the action attribute within the onsubmit event: Example
HTML
<form action="#" onsubmit="send(this)" method="post" target="_blank" >
<input id="text"/>
<input type="submit" value="submit"/>
</form>
JavaScript
function send( form){
form.action = location.href + '/'+encodeURI(document.getElementById('text').value);
}
Also, overriding the form action, or redirecting the user, within the onsubmit event will allow you to use a true submit button.
This gives the user the ability to just hit the enter key once they finish typing to submit the search without you having to write extra logic listening for the the enter key within the textbox to submit the search.