CODEWITHSUNDEEP
javascripthtmlcss
Najeeb Qureshi
Najeeb Qureshi

Reputation: 37

Calculator on HTML/CSS/Javascript

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>

Upvotes: 1

Views: 212

Answers (2)

Maik Lowrey
Maik Lowrey

Reputation: 17556

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.

Upvotes: 0

Robo Robok
Robo Robok

Reputation: 22663

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

Upvotes: 1

Related Questions