comparing a user given input to a string in javascript - javascript

parts of my code. it was supposed to count 2 if all of your answers were correct.
i am just a begginer at this. the error is that when i open my browser and click the "check?" nothing happens.
<head>
<script language="javascript">
function checker()
{
var myscore = 0;
if(parseInt(document.quiz.num1.value) == 6)
{ myscore = (myscore + 1);}
else
{ myscore;}
if(document.quiz.num2.value == type of "dry" )
{ myscore = (myscore + 1);}
else
{ myscore;}
document.myform.thescore.value = myscore;
}
</script>
</head>
<body>
<form name="quiz">
How many feet are ther in 1 Fathom? <input type="text" id="num1">
<br>
What type of stones can never be found in the ocean? <input type="text" id="num2">
<br>
My Score: <input type="text" id="thescore"><br>
<input type="button" value="Check?" onClick="checker()">
</form>
</body>

here is your answer:
<html>
<head>
<script lang="Java-Script">
var msg;
var sc;
function validateTest()
{
sc=0;
msg=document.frm.num1.value;
if(msg==6)
sc=sc+1;
msg=document.frm.num2.value;
if(msg=='dry')
sc=sc+1;
document.frm.thescore.value=sc;
return;
}
</script>
</head>
<body>
<form name="frm">
How many feet are there in 1 Fathom? <input type="text" name="num1"><br>
What type of stones can never be found in the ocean? <input type="text" name="num2"><br>
My Score: <input type="text" name="thescore"><br>
<input type="button" value="Submit" onclick="validateTest()">
</form>
</body>
</html>
i have already tested this, it will work.

Related

HTML, how to get always +1 sum

I'm doing a point counter in general and I have no idea how to do it anymore, so I would like to add +1 to the sum on the "=" button and add it only once if someone could help me, I would be grateful
Code: https://pastebin.com/C26VFyev
var result = 0;
function suma() {
var cal1 = parseFloat(document.forms["form1"]["cal1"].value);
var cal2 = parseFloat(document.forms["form1"]["cal2"].value);
var sum = (cal1 + cal2 + 1);
document.forms["form1"]["sum"].value = sum
result = sum;
}
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form name="form1">
Cal 1:
<input value="0" name="cal1" size="5"><br> Cal2:
<input value="0" name="cal2" size="5"><br>
<input type="button" value="Oblicz" name="add" onClick="suma();"><br> Suma:
<input type="text" name="sum" size="6"><br>
<input type="reset" value="Reset"><br>
</form>
</body>
</html>
Use a variable for what you add to the sum. Initialize it to 1 for the first time, than change it to 0 for future uses.
var result = 0;
var addition = 1;
function suma() {
var cal1 = parseFloat(document.forms["form1"]["cal1"].value);
var cal2 = parseFloat(document.forms["form1"]["cal2"].value);
var sum = (cal1 + cal2 + addition);
if (addition == 1) {
addition = 0;
}
document.forms["form1"]["sum"].value = sum
result = sum;
}
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form name="form1">
Cal 1:
<input value="0" name="cal1" size="5"><br> Cal2:
<input value="0" name="cal2" size="5"><br>
<input type="button" value="Oblicz" name="add" onClick="suma();"><br> Suma:
<input type="text" name="sum" size="6"><br>
<input type="reset" value="Reset"><br>
</form>
</body>
</html>

JavaScript problems with HTML user input

Sorry if this question is answered somewhere, but I couldn't find anything close to my question or an answer in other posts.
I'm trying to make a blog, but I'm still learning, so I use my index page for experimenting. Anyways, I have a section on my webpage where you get an output dependant on the input of the user and I can't get the input from the webpage to be received by the JavaScript.
DO NOTE that I only tried this in Microsoft Edge on my laptop and Firefox on my phone, but I don't think that it's to my browsers.
Also, I think it effects my calculator, but that's not for this post.
Feel free to edit my code in the answers, but it would be preferred to explain the edits to the code.
Anyways, thank you in advance for any help you're willing to provide!
Note that I haven't found any posts that answer my question, so please link to the post before closing this post :)
Also, the blank spaces are for future code and I'm not a pro in case someone didn't figure that out.
function age(){
var age=document.getElementById('age');
if(age<18){
document.getElementById('Age').innerHTML="Underage";
alert("This is your age: "+age);
}
else{document.getElementById('Age').innerHTML="Of age";
alert("This is your age: "+age);
}
}
function calculate(){
var num1=document.getElementById('firstNumber');
var num2=document.getElementById('secondNumber');
var sum=num1+num2;
document.getElementById('Age').innerHTML=sum;
}
.page{background-color:#ce6efa;}
#firstHeading{font-family:Nyala, "Palatino Linotype";}
label{color:#5728ad;}
#Age{color:#243bd4;}
<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="fistNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="Age"></p>
<script src="mainpage.js"></script>
</body>
</html>
If I use alert(), I get odd results. Like in the code, the output is
This is your age: [object HTMLInputElement].
When I change it to:
var age2=++age;
alert("This is your age: "+age2);
then the output goes from [object HTMLInputElement] to NaN.
Explanations?
Okay?
At first I found some inconsistencies:
1- "var age = document.getElementById ('age')" failed to report which property needed. In your case: "value". In the "calculate" function I encountered the same problem on the first two lines
2- "var num1 = document.getElementById ('fistNumber')" element id was wrong. I have corrected for "firstNumber"
3- In two moments in which you make a comparison of the age and sum of the values captured in the "calculate" function, I used the "parseInt" function to prevent the variables from being considered strings and thus concatenated.
I hope I have helped.
function age(){
var age=document.getElementById('age').value;
if(parseInt(age)<18){
document.getElementById('Age').innerHTML="Underage";
alert("This is your age: "+age);
}
else{alert("This is your age: "+age);
}
}
function calculate(){
var num1=document.getElementById('firstNumber').value;
var num2=document.getElementById('secondNumber').value;
var sum=parseInt(num1)+parseInt(num2);
document.getElementById('Age').innerHTML=sum;
}
.page{background-color:#ce6efa;}
#firstHeading{font-family:Nyala, "Palatino Linotype";}
label{color:#5728ad;}
#Age{color:#243bd4;}
<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="firstNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="Age"></p>
<script src="mainpage.js"></script>
</body>
</html>
So here are the changes I made:
Firstly, use the value of the property of dom elements you fetch by id.
Then correct the spelling of firstNumber in you HTML. You have mistyped fistNumber.
Also before comparing (x<18) in your age function, you must convert the string to an integer using the parseInt function.
function age(){
var age=document.getElementById('age').value;
age = parseInt(age);
if(age<18){
document.getElementById('Age').innerHTML="Underage";
alert("This is your age: "+age);
}
else{alert("This is your age: "+age);
}
}
function calculate(){
var num1=document.getElementById('firstNumber').value;
var num2=document.getElementById('secondNumber').value;
var sum=num1+num2;
document.getElementById('Age').innerHTML=sum;
}
.page{background-color:#ce6efa;}
#firstHeading{font-family:Nyala, "Palatino Linotype";}
label{color:#5728ad;}
#Age{color:#243bd4;}
<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="firstNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="Age"></p>
<script src="mainpage.js"></script>
</body>
</html>
You need to get the 'value' of the property: document.getElementById('age').value;
Also, your first name input ID is miss-spelled. "fistNumber"
function age() {
var age = document.getElementById('age').value;
if(age == "" || age == null) {
alert("Please enter an age!");
return;
}
if (parseInt(age) < 18) {
document.getElementById('alert').innerHTML = "Underage";
alert("This is your age: " + age);
} else {
document.getElementById('alert').innerHTML = "Of Age";
alert("This is your age: " + age);
}
}
function calculate() {
var num1 = document.getElementById('firstNumber').value;
var num2 = document.getElementById('secondNumber').value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('alert').innerHTML = sum;
}
.page {
background-color: #ce6efa;
}
#firstHeading {
font-family: Nyala, "Palatino Linotype";
}
label {
color: #5728ad;
}
#Age {
color: #243bd4;
}
<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="firstNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="alert"></p>
<script src="mainpage.js"></script>
</body>
</html>

JavaScript Fibonacci Calculator: How to output answer into text box?

I am currently trying to make a calculator that takes a numerical input (n) and shows the Fibonacci number to the nth sequence. I am a beginner at Javascript and just can't seem to make my code work:
HTML:
<head>
<script src="calculator.js"></script>
</head>
<body>
<input type="number" name="Input" value="" id="userInput" / >
<input type="button" value="Go" onclick="calculate();" />
<input type="number" name="Answer" id="userAnswer" />
</body>
JavaScript:
var input = document.getElementById("userInput");
var output = document.getElementById("userAnswer");
var answer;
function calculate(){
n = input.value;
if (n < 2){
return 1;
} else {
answer = calculate(n - 2) + calculate(n - 1);
return answer;
}
output.value = answer;
}
Don't be complex!
function calculate(n){
if (n < 2){
return 1;
} else {
return calculate(n - 2) + calculate(n - 1);
}
}
<head>
<script src="calculator.js"></script>
</head>
<body>
<input type="number" name="Input" value="" id="userInput" / >
<input type="button" value="Go" onclick="document.getElementById('userAnswer').value=calculate(document.getElementById('userInput').value);" /><br>
<input type="number" name="Answer" id="userAnswer" />
</body>

Calling string from one function into another doesent seem to work., why?

So I have this code and it does not seem to work. The thing I want it to do is to call the "together" from the function "go" in the function "second". What am i doing wrong?
The program was initially supposed to take what is in the input-text and add it with the ".com" or the ".no"(depending on what u checked) and redirect to that page. But I only want to call the "together" in the "second" function. Is there any better way to do it?
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<link rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for="no">.no</label><br />
<input type="radio" id="com" name="end" value=".com">
<label for="com">.com</label>
</div>
</fieldset>
<script type="text/javascript">
var end = "";
var input = document.getElementById("input").value;
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
}
second(together);
function second(together){
alert(together);
}
</script>
</body>
</html>
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
} // remove this
second(together);
} // add this

Something is going wrong with this onclick

<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 || numbers.indexOf(prod_id.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 || numbers.indexOf(prod_type.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
This is a test page being written to only learn basics.When I am pressing Submit there is no checking happening and it goes to Submit.html page.why? What modification is needed here?
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
What exactly happens when I am pressing this button?
var prod_id=document.getElementByID("productid").value;
var prod_type=document.myform.producttype.value;
both mechanisms are same ?
This is the Modified one.But still not working. Please help
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric(); " value="Submit">
</form>
</body>
</html>
there you go you forgot closing parenthesis for if statements:
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
if You want didn't go to Action page You must put return false; at end of onclick like this
onclick="validateAlphaNumeric();return false;"
or put return false; at end of function that you Call with return false; you say browser don't submit
Try returning false when validation fails

Categories

Resources