Connecting html input to javascript

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.

<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.

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

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

Add this attribute to your button

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

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

1 Like

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”

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

<h2>Bmi Calculator</h2>
<h1>  Metric units  </h1>  <h1>  Imperial units  </h1>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
<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="">Coded by Dylan Bozarth </a>

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" 
    if (results >= 25)
    return "Bruh"
    return "You are healthy"

    return results

The only error I get running your code is from the break keyword that should not be there. Once you fix that, your code should not error out. I would suggest moving the script to be right before the </body> though.

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.

where is the head section???

1 Like

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" 
    if (results >= 25)
    return "Bruh"

1 Like

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

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

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

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

1 Like

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