CODEWITHSUNDEEP
javascripthtml
ben
ben

Reputation: 13

HTML output not updating/calculating after 1st button click

Learning javascript currently. I wanted to create a simple volume calculator for practice. It works at first when you click the button to calculate but if you change the numbers for the inputs it will not calculate unless refreshed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="Calc.css">
</head>
<body>
    <div class="box">
        <input type="number" class="length">
        <input type="number" class="width"> 
        <input type="number" class="height">
        <button type="button">calculate</button>
        <p>Your volume is: <span type="number" class="volume"></span></p> 
</div>

<script src="Calc.js"></script>
</body>
</html>


const length = document.querySelector('.length').value;
const width = document.querySelector('.width').value;
const height = document.querySelector('.height').value;
const button = document.querySelector('button');
const volume = document.querySelector('.volume');

function calculate () {
    volume.innerHTML = length * width * height + " cubic inches.";
}

button.addEventListener('click', calculate);

Upvotes: 0

Views: 62

Answers (3)

sid busa
sid busa

Reputation: 186

` <input type="text" id="length">
        <input type="text" id="width"> 
        <input type="text" id="height">
        <button type="button" id="myBtn">calculate</button>
        <p>Your volume is: <span id="Answer"> </span></p> 
<script>

    function calculateVolume()
     {
         var width = document.getElementById("width");
         var height = document.getElementById("height");
         var length = document.getElementById("length");
         var Answer = width * height *length  
        document.getElementById("Answer").innerHTML = Answer +"cubic inches.";

     }

     document.getElementById("myBtn").addEventListener("click", calculateVolume);

</script>
`

Upvotes: -1

Saharsh
Saharsh

Reputation: 1098

Welcome to SO.

There was a tiny mistake you made there in JS. Instead of loading length, breadth and height in variable while loading JS file, you have to load these values everytime the button is clicked, i.e. everytime function is called. So just put those variable declaration inside function.

In nut shell,

From this:

const length = document.querySelector('.length').value;
const width = document.querySelector('.width').value;
const height = document.querySelector('.height').value;
const button = document.querySelector('button');
const volume = document.querySelector('.volume');

function calculate () {
    volume.innerHTML = length * width * height + " cubic inches.";
}

button.addEventListener('click', calculate);

You will go to:

const button = document.querySelector('button');
const volume = document.querySelector('.volume');

function calculate () {
  const length = document.querySelector('.length').value;
  const width = document.querySelector('.width').value;
  const height = document.querySelector('.height').value;
  volume.innerHTML = length * width * height + " cubic inches.";
}

button.addEventListener('click', calculate);

Notice where I have put variable declaration.

Upvotes: 2

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

Fetch values inside your function

const button = document.querySelector('button');
const volume = document.querySelector('.volume');

function calculate() {
  const length = document.querySelector('.length').value;
  const width = document.querySelector('.width').value;
  const height = document.querySelector('.height').value;
  volume.innerHTML = (length * width * height) + " cubic inches.";
}

button.addEventListener('click', calculate);
<div class="box">
  <input type="number" class="length">
  <input type="number" class="width">
  <input type="number" class="height">
  <button type="button">calculate</button>
  <p>Your volume is: <span type="number" class="volume"></span></p>
</div>

Upvotes: 0

Related Questions