CODEWITHSUNDEEP
javascripthtml
The One Who Will
The One Who Will

Reputation: 77

Why is the onClick() not responding

So I was creating a simple calculator for Area and perimeter of circles. I stored the code in JavaScript and called it on the onClick(), however, the innerHtml is not changing at all.

calculate(radius) {
  cal_area = String(Math.PI * (radius * radius));
  cal_perimeter = String(Math.PI * (radius * 2));
  document.getElementById("Area").innerHTML = cal_area;
  document.getElementById("Perimeter").innerHTML = cal_perimeter;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Circles</title>
  <script src="brain.js"></script>
</head>

<body>
  <form>
    <input type="number" id="Radius" placeholder="Radius">
    <br>
    <input type="submit" value="Calculate" onclick="calculate(radius = document.getElementById("Radius").value;);">
  </form>
  <br>
  <p id="Area">test</p>
  <br>
  <p id="Perimeter">test</p>
</body>
</html>

Upvotes: 0

Views: 97

Answers (5)

Luca Bigoni
Luca Bigoni

Reputation: 11

you are performing an assignment within the call, and it is a horror it must be done in the function itself.

in this example i had added "event.preventDefault()" in this way you can stop the page refresh .

function calculate(radius) {
  var cal_area = String(Math.PI * (radius * radius));
  var cal_perimeter = String(Math.PI * (radius * 2));
  document.getElementById("Area").innerText = cal_area;
  document.getElementById("Perimeter").innerText = cal_perimeter;
};
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Circles</title>
  <script src="brain.js"></script>
</head>

<body>
  <form>
    <input type="number" id="Radius" placeholder="Radius">
    <br>
    <input type="submit" value="Calculate" onclick="calculate(document.getElementById('Radius').value)">
  </form>
  <br>
  <p id="Area">test</p>
  <br>
  <p id="Perimeter">test</p>
</body>

</html>

Upvotes: 0

Luca Bigoni
Luca Bigoni

Reputation: 11

function calculate(radius) {
  event.preventDefault()
  var cal_area = String(Math.PI * (radius * radius));
  var cal_perimeter = String(Math.PI * (radius * 2));
  var Area =document.getElementById("Area").innerText = cal_area;
  var Peri=document.getElementById("Perimeter").innerText = cal_perimeter;
};
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Circles</title>
  <script src="brain.js"></script>
</head>

<body>
  <form>
    <input type="number" id="Radius" placeholder="Radius" value="0">
    <br>
    <input type="submit" value="Calculate" onclick="calculate(document.getElementById('Radius').value)">
  </form>
  <br>
  <p id="Area">test</p>
  <br>
  <p id="Perimeter">test</p>
</body>

</html>

Upvotes: -1

Anand G
Anand G

Reputation: 3200

There is bit of refactoring is needed in your code. Eg. "double quotes" and "value assignment". I have modified your code. Take a look below

function calculate() {
  event.preventDefault();
  var radius = document.getElementById("Radius").value;
  var cal_area = String(Math.PI * (radius * radius));
  var cal_perimeter = String(Math.PI * (radius * 2));
  document.getElementById("Area").innerHTML = cal_area;
  document.getElementById("Perimeter").innerHTML = cal_perimeter;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Circles</title>
  <script src="brain.js"></script>
</head>

<body>
  <form>
    <input type="number" id="Radius" placeholder="Radius">
    <br>
    <input type="submit" value="Calculate" onclick="calculate()">
  </form>
  <br>
  <p id="Area">test</p>
  <br>
  <p id="Perimeter">test</p>
</body>

If you see above code, I have made following changes

  1. I added event.preventDefault(); in the function. This will stop page refresh on click.
  2. I removed the value assignment from the HTML. I changed onclick="calculate(radius = document.getElementById("Radius").value;);" to onclick="calculate()".
  3. I accessing the value of radius in function itself. var radius = document.getElementById("Radius").value;

Upvotes: 0

victini
victini

Reputation: 77

I'd suggest using something more along the lines of the following. You need to use singly quotes around Radius because you already have a double quote before the word calculate, so it's cutting short. You also don't need to assign a variable in your HTML, just pass through document.getElementById('Radius').value

<input type="submit" value="Calculate" onclick="calculate(document.getElementById('Radius').value)">

Also you should include the word function before your function

function calculate(radius){
  cal_area = String(Math.PI * (radius * radius));
  cal_perimeter = String(Math.PI * (radius * 2));
  document.getElementById("Area").innerHTML = cal_area;
  document.getElementById("Perimeter").innerHTML = cal_perimeter;
}

Upvotes: 2

RAINAN BOMFIM
RAINAN BOMFIM

Reputation: 42

Instead of writing "Radius"with double quotes type 'Radius' with single quotes in your onclick.

Upvotes: 0

Related Questions