Passing on a variable to a JS function from HTML

Question

I'm currently working on a little programming task for school. I chose the task because I had an idea how to get the core of the program running in Java, but I'm having issues translating this into a very simple web page, no experience with HTML or JS.

My issue is: I'm receiving input via a button. When clicked, a function is called and that function gets the value of the input. However, all I get as the alert window is objectHTMLinputElement. What am I doing wrong?

function myRT() {
  var risikoTraeger=document.getElementById('input1').value; 
}

function myRH() {
  var risikoHoehe = parseInt(document.getElementById('input2')).value;
  alert(input2);
}

<h1>Siemens: Risikoassessment</h1>

<p id="demo">How many entries?</p>

<input type="text" id="input1" />
<button type="button" onclick="myRT()">Risk carrier</button>
<input type="text" id="input2" />
<button type="button" onclick="myRH()">Sum of the risk</button>

MervS · Accepted Answer · 2016-10-07 07:04:49Z

3

Get the value of the input before parsing it. Plus, you are alerting an input element instead of the variable that you are setting the value to. Use:

function myRH(){
  var risikoHoehe = parseInt(document.getElementById('input2').value);
  alert(risikoHoehe);
}

answered Oct 7, 2016 at 7:04

MervS

5,9223 gold badges25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AB Udhay · Accepted Answer · 2016-10-07 07:04:57Z

0

Change this part parseInt(document.getElementById('input2')).value; as :

parseInt(document.getElementById('input2').value)

answered Oct 7, 2016 at 7:04

AB Udhay

7634 silver badges10 bronze badges

Comments

Ben · Accepted Answer · 2016-10-07 07:09:37Z

0

You're calling the wrong variable, try 'risikoHoehe' instead of 'input2':

function myRT() {
  var risikoTraeger=document.getElementById('input1').value; 
}

function myRH(){
  var risikoHoehe = document.getElementById('input2').value;
  alert(risikoHoehe);
}

answered Oct 7, 2016 at 7:09

Ben

11011 bronze badges

Comments

Flying Gambit · Accepted Answer · 2016-10-07 07:10:48Z

0

1) You are trying to parse a DOM element to an int so it returns undefined.

Use document.getElementById('input2').value.

2) Use parseInt only if needed, if its just for alerting then you can skip it

3) You cannot directly refer to an dom element by id, you have to get that element in a variable and then use it.

alert(input2); should be alert(risikoHoehe);

answered Oct 7, 2016 at 7:10

Flying Gambit

1,2761 gold badge17 silver badges33 bronze badges

Comments

Vikash Pandey · Accepted Answer · 2016-10-07 07:11:29Z

Well, Here is the complete working code-

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myRT() {
var risikoTraeger=document.getElementById('input1').value; 
  alert(risikoTraeger);
}

function myRH(){
var risikoHoehe = parseInt(document.getElementById('input2').value);
alert(risikoHoehe);
}
</script>
</head>

<body>

<h1>Siemens: Risikoassessment</h1>

<p id="demo">How many entries?</p>

<input type="text" id="input1" />
<button type="button" onclick="myRT()">Risk carrier</button>
  </br>
<input type="text" id="input2" />
<button type="button" onclick="myRH()">Sum of the risk</button>

</body>
</html>

Hoping this will help you :)

Taha Paksu · Accepted Answer · 2016-10-07 07:16:55Z

Let's see what you are doing wrong:

var risikoHoehe = parseInt(document.getElementById('input2')).value;

document
document itself
getElementById()
the function which gives us the element that has the specific ID parameter
'input2'
the ID of the desired input
.value
the element's value if it has any.
parseInt()
the function that converts any string to it's integer value.

now look at here:

document.getElementById('input2') => the input element itself (objectHTMLInputElement)
parseInt(objectHTMLInputElement) => what can we get if we try to convert the html input element to an integer?
(integer).value => does integers have value property?

But if you write it like this:

var risikoHoehe = parseInt(document.getElementById('input2').value);

document.getElementById('input2') => the input element itself (objectHTMLInputElement)
objectHTMLInputElement.value => the value of the input as string
parseInt(string) => Parse the integer value of the string

Collectives™ on Stack Overflow

Passing on a variable to a JS function from HTML

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Related