Calculator on HTML/CSS/Javascript-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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.