CODEWITHSUNDEEP
javascripthtml
someones49th
someones49th

Reputation: 21

Passing on a variable to a JS function from HTML

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>

Upvotes: 0

Views: 78

Answers (6)

Taha Paksu
Taha Paksu

Reputation: 15616

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

Upvotes: 0

Vikash Pandey
Vikash Pandey

Reputation: 5443

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 :)

Upvotes: 0

Flying Gambit
Flying Gambit

Reputation: 1276

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);

Upvotes: 0

Ben
Ben

Reputation: 110

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);
}

Upvotes: 0

AB Udhay
AB Udhay

Reputation: 753

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

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

Upvotes: 0

MervS
MervS

Reputation: 5902

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);
}

Upvotes: 3

Related Questions