Home > Software design >  JS Calculator Gives `getElementById is not defined` [duplicate]
JS Calculator Gives `getElementById is not defined` [duplicate]

Time:10-01

what's the problem in this code? I have tried and can't figure it out. I am a total newbie in HTML, JavaScript, and CSS. I am wandering around the internet but I think I am missing something and its a small mistake. can you kindly help? I have to learn this for my upcoming projects

here is the code

function result() {
  let a = getElementById("constant").value;
  let b = getElementById("height").value;
  let c = getElementById("freq").value;
  let sum = Number(a)   Number(b)   Number(c);
  document.getElementById("Calculate").value = sum;
}
<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/>

CodePudding user response:

It is document.getElementById(). See: MDN WebDocs: document.getElementById().

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

function result()
{

let a = document.getElementById("constant").value;
let b = document.getElementById("height").value;
let c = document.getElementById("freq").value;
let sum = Number(a)   Number(b)   Number(c);

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

}
<!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>

  • Related