-1

I want to write a simple formula of:

Force = pressure x area = (resluts showign here)

I think I have the formula correct, but how do I go about displaying the results?

The code I have so far is this below:

    <body>
    <h1> 
    Force = 
    <input type="number" id= "pressure" value= ""/> x  <br/>
    <input type= "number" id= "area" value= ""/>
    <button onclick = "equals" id="equals" >=</button>
    <output type="number" id= "forceResult" ></output> 
    </h1>
    </body>
    
    let pressure = document.getElementById (pressure);
    let area = document.getElementById (area);
    let equals = document.getElementById (equals);
    let forceResult = document.getElmentById (forceResult);
    
    function force1 (pressure, area) {
    let force = pressure * area;
    return force;
    }
    equals.onclick () => {
     force.innerHTML = force 
    }
    
    }
    <h1> 
    Force = 
    <input type="number" id= "pressure" value= ""/> x  <br/>
    <input type= "number" id= "area" value= ""/>
    <button onclick = "equals" id="equals" >=</button>
    <output type="number" id= "forceResult" ></output> 
    </h1>
Dave Newton
  • 158,873
  • 26
  • 254
  • 302
Chico Amelio
  • 3
  • 1
  • 1
    In the click handler. you need to retrieve the form field values, do the math (which you can do by calling your function), and putting the results into the output contents. Which part/s cause/s issues? – Dave Newton Sep 09 '21 at 23:45
  • You should put labels on the fields for accessibility purposes. – no ai please Sep 09 '21 at 23:52
  • 1
    What is the issue with your code? Please [edit] your post. You have syntax errors. Use [`addEventListener`](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) instead of assigning to an `onclick` property. Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Is your ` – Sebastian Simon Sep 10 '21 at 00:12
  • @DaveNewton Which part/s cause/s issues? I am cllicking on the button "equals" and I get nothing... I changed the .onclick to: – Chico Amelio Sep 10 '21 at 00:14
  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Community Sep 15 '21 at 17:02

1 Answers1

1

Your code contains a lot of errors and typos. Write it more carefully

let pressure = document.getElementById('pressure');
let area = document.getElementById('area');
let equals = document.getElementById('equals');
let forceResult = document.getElementById('forceResult');

function force1 (pressure, area) {
  return pressure * area;
}

equals.onclick = function () {
    const pressureValue = Number(pressure.value)
  const areaValue = Number(area.value)
    const result = force1(pressureValue, areaValue)
  
  forceResult.innerHTML = result
}
<h1> 
  Force = 
  <input type="number" id="pressure" value=""/>
  x<br/>
  <input type="number" id="area" value=""/>
  <button onclick="equals()" id="equals">=</button>
  <output type="number" id="forceResult"></output> 
</h1>
italant
  • 187
  • 1
  • 12