Calculator on HTML/CSS/Javascript

Question

Hello I have been struggling to learn HTML CSS and JAVASCRIPT. I have never tried and don't know basics exactly and I want to create a calculator and even for the basics I did simple example of x+1/2 and the answer I get is wrong here is the code

function result() {
  var x = document.getElementById("constant").value;
  var y = document.getElementById("height").value;
  var z = document.getElementById("freq").value;
  var c = 3 * 10 ** 8;
  var k = x + 1;
  var k2 = k / 2;

  document.getElementById("Calculate").value = k2;

}

<!DOCTYPE html>
<html>

<head>
  <h1>Microstrip Calculator</h1>
  <p>Enter the following values in numeric form:</p>
</head>

<body>
  <form>

    Di-Electric Constant: <input class="text" Placeholder="Enter Value" id="constant" </input>
    <br> Di-Electric Height: <input class="text" Placeholder="Enter Value" id="height" </input>
    <br> Operational Frequency: <input class="text" Placeholder="Enter Value" id="freq" </input>
    <br>

    <br>
    <input type="text" id="Calculate" </input>
    <input type="button" value="Calculate" onclick="result()">
  </form>
  <br/>

</body>

</html>

its alright now I had to use Number(x)

Najeeb Qureshi
– Najeeb Qureshi

2021-11-06 19:58:47 +00:00
Commented Nov 6, 2021 at 19:58 — Najeeb Qureshi
– Najeeb Qureshi, Commented Nov 6, 2021 at 19:58

Robo Robok · Accepted Answer · 2021-11-06 19:59:33Z

1

Keep in mind that input value is always a string. And if you add to a string, you get a concatenated string, i.e.:

'1' + 1 === '11'

Convert your input values to numbers to make them behave like... well, numbers:

var x = Number(document.getElementById("constant").value);
var y = Number(document.getElementById("height").value);
var z = Number(document.getElementById("freq").value);

answered Nov 6, 2021 at 19:59

Robo Robok

23.1k22 gold badges84 silver badges146 bronze badges

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

Comments

Maik Lowrey · Accepted Answer · 2021-11-07 06:11:01Z

0

Inputs from a forms are always strings. To illustrate this, here is a small example:

a = "2"
b = "3"

console.log(a + b)
// but after convert string to int with the JS Function Number()
console.log(Number(a) + Number(b))

This means, you have to convert all input from your form to numbers first.

edited Nov 7, 2021 at 6:11

answered Nov 6, 2021 at 20:04

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

Collectives™ on Stack Overflow

Calculator on HTML/CSS/Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related