Connecting html input to javascript

1

Hello everyone. I have a very simple question that I think will have a simple answer, I just can’t find exactly what I need on google for some reason.
I want to have my HTML inputs become the parameters in my javascript function.
The HTML:

<h4>Your Height</h4>
<input value="userheight"> </input> 
<h4>Your Weight</h4>
<input value="userweight"> </input> 

function calculate() {
    const results = (userheight * userweight ^ 2)
}

What is the missing link here? How do I get them to talk to each other?
Thank you in advance for your time.

2

Firs you have access the input in JavaScript
There various method of that i suggest first give id or class to input and after that

function calculate() {
let userheight = document.querySelector('#numOne').value ;

let userweight = document.querySelector('#numOne').value ;

const results = (userheight * userweight ^ 2);
}
1 Like
3

Great. I follow completely.
However I have on more question. How do I trigger the function with my button?

4

Add this attribute to your button

<button onclick="calculate()">Show</button>
1 Like
5

first select ur button element then:
buttonElement.addEventListener(“click”,function() {
calculate()
})

1 Like
7

Hi everyone, I thought this was solved but I took another crack at it and ran into some errors.
my full code
For some reason the web page is telling me that “calculate is undefined”

<html>
        <link rel="stylesheet" type="text/css" href="calcstyle.css">
<body> 

<div> 
<h2>Bmi Calculator</h2>
<h1>  Metric units  </h1>  <h1>  Imperial units  </h1>
<h4>Sex</h4>
<select>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
<h4>Your Height</h4>
<input value="" id="height"> </input> 
<h4>Your Weight</h4>
<input value="" id="weight"> </input> 
<button onclick='Calculate()'>Do it</button>

<a href="https://github.com/Imstupidpleasehelp">Coded by Dylan Bozarth </a>
</div>
</body>

<script> 
function Calculate() {
let userheight = document.querySelector('#height').value;

let userweight = document.querySelector('#weight').value;
const results = (userheight * userweight ^ 2)
    if (results >= 15) 
    return "Your bmi too high" 
    break
    if (results >= 25)
    return "Bruh"
    else 
    return "You are healthy"

    return results
}
</script>
</html>
9

I removed the break statement, however I am still getting the “Calculate is undefined” error on my webpage.
Is my function all right? Is my button alright? These are the two areas I feel most unsure of.

<button onclick='Calculate()'>Do it</button>

Don’t worry about a speedy reply, i have to go to work now. So thank you in advance everyone for your help.

10

where is the head section???

1 Like
11

have you moved the script tag inside the body tags? just before the closing body tag?

remember that a if/else chain will execute only the first true statement
same thing if you have only if statements but with a return inside each
what’s the first true one if bmi is 27?
(also you need to remove break)


    if (results >= 15) 
    return "Your bmi too high" 
    break
    if (results >= 25)
    return "Bruh"
1 Like
12

I already removed the break statement.
So I have to ask a follow up question, so I moved my tag down past the script tag. I am still getting the error
“calcuator.html:19 Uncaught ReferenceError: Calculate is not defined
at HTMLButtonElement.onclick”
Also I added a head section.
Thank you all for your continuing support. I really appreciate it

13

And I have changed the if statement. I just put it there as a placeholder while I figured out the rest

14

I tested your code in a codepen and it works for me with the previous advice of removing the break

You’ll also need to use @ilenia’s advice to get it working correctly. I’ll add that ^ 2 is not correct and too look into the Math. methods ( https://www.w3schools.com/js/js_math.asp )

For an Imput of 10 & 10, i see a result of 102

image
image1029×532 29 KB

1 Like
15

I think I should be able to figure it out now. Thank you everyone for your help.