JavaScript problems with HTML user input

Question

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?

use var age = document.getElementById('age').value; The key being the value property to access the inputs value. — AtheistP3ace
– AtheistP3ace, Commented Jun 28, 2017 at 20:19
Yes the explanation to your edit is document.getElementById returns the DOM object. When it turns it into a string for the alert you get the object type which is HTMLInputElement. To get an inputs value you need to access it using .value. Take a look at the fiddle. Its commented and working code. jsfiddle.net/ho4xLfpd/1 — AtheistP3ace
– AtheistP3ace, Commented Jun 28, 2017 at 20:31

Marcus Urbano · Accepted Answer · 2017-06-28 20:52:33Z

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>

dorado · Accepted Answer · 2017-06-28 20:27:47Z

0

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>

answered Jun 28, 2017 at 20:27

dorado

1,5251 gold badge16 silver badges38 bronze badges

2 Comments

Sandy Vujaković Over a year ago

Do you know any sources for this stuff, since I can't jump ahead in SoloLearn courses? I have so much to learn, I wonder whether I will before I turn 16.

dorado Over a year ago

Have you tried freecodecamp.com yet? It's pretty awesome if you ask me. :)

Woodrow · Accepted Answer · 2017-06-28 20:23:36Z

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>

Do you know any sources for this sort of stuff, since I can't jump ahead in SoloLearn courses? Also, I just noticed I addressed the wrong paragraph in calculate(), it should be document.getElementById('calc').value.

Collectives™ on Stack Overflow

JavaScript problems with HTML user input

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related