CODEWITHSUNDEEP
javascripthtmlinput
Sandy Vujaković
Sandy Vujaković

Reputation: 3

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?

Upvotes: 0

Views: 274

Answers (3)

Marcus Urbano
Marcus Urbano

Reputation: 141

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>

Upvotes: 2

dorado
dorado

Reputation: 1525

So here are the changes I made:

  1. Firstly, use the value of the property of dom elements you fetch by id.
  2. Then correct the spelling of firstNumber in you HTML. You have mistyped fistNumber.
  3. 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>

Upvotes: 0

Woodrow
Woodrow

Reputation: 2832

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>

Upvotes: 0

Related Questions