HTML output not updating/calculating after 1st button click

r shiny action button example
shiny action button onclick
html form calculation javascript
html auto calculate total amount
r shiny action button vs submit button
real time calculations using javascript
javascript onchange calculate total quantity price demo
update action button shiny

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

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.

Doing real-time calculations in a form using JavaScript, Working with Form Elements. Before we can start coding the JavaScript, we need to have a form to work with. See the HTML code for the 'cake order form  When I click on the button the text will change in the text after the innerHTML=" ". The problem is that one I add to much text on the places ---future--- it won't load it anymore in the browser. The screen just won't update.

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>

output is not refreshed after (slow?) reactive is done · Issue #1692 , output is not refreshed after (slow?) reactive is done #1692 the download button, minimize the input.data and drop all but the first filtering step, that the calculation of the heatmap takes a long time, somehow triggering a bug in Shiny's scheduling. I did not update shiny or R on the machine in question. Here a Calculator is going to be formed with HTML code. Calculator Title: This is the title at the top of our application, “GeeksforGeeks Calculator”. Output Screen: This will be our output screen, where all text will be shown. Like the input that the user will type and the answer calculated from the user input.

` <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>
`

Using Action Buttons, Action buttons and action links are different from other Shiny widgets because observeEvent() observes a reactive value, which is set in the first Output that depends on the expression will not update until the eventReactive() returns NULL until the action button is clicked. Shiny HTML Tags Glossary. Also, with the "on" function, you don't actually need to use the document ready function. It sets the listener to document level, and then scrapes the page for the elements to listen to.

Stop reactions with isolate(), Last Updated: 28 Jun 2017 First, output$distPlot will take a dependency on input$goButton , simply When the button is clicked, the value of input$goButton increases, and so not take a dependency on any reactive objects inside the expression. Building off the Fibonacci example from above, this would calculate the  We create form using HTML script with (method="post") and action="output.php". We define Five fields inside the HTML form. First for name,Second for Email_id, Third for Password,Fourth for Mobile No,and Fifth for address. A button is used to display data on next page after click on this button. inside the (output.php) page we create same form

Forms and Form Fields :: Eloquent JavaScript, HTML allows a number of different styles of fields, ranging from simple on/off checkboxes Form fields do not necessarily have to appear in a <form> tag. from the text input to the OK button, rather than going through the help link first: Clicking the label will activate the field, which focuses it and toggles its value when it  To get around this we can use a very simple bit of Javascript to disable the ‘Submit’ button after the first click. Even if the user does end up clicking twice or more these additional clicks will not count. A Demonstration. Below is a standard button. Go ahead, click it multiple times and you will see each click is received:

How to build an HTML calculator app from scratch using JavaScript, This is an epic article where you learn how to build a calculator from scratch. If the key does not have a data-action attribute, it must be a number key. Next, we want to update the display to the clicked key. One way to save this first number is to add it to a custom attribute when the operator button gets  Excel formulas are not updating. The value returned by Excel’s formula doesn’t update automatically – the cell with the formula continues to show the old value even after changing the values of the dependent cells. The problem is most likely caused by accidentally changing the calculation setting from Automatic to Manual.

Comments
  • You're taking the values on pageload, not on click
  • Thanks, much appreciated. Its nice to finally be on here.
  • Pasting code without any explanation is not helpful. It is not clear what you have changed and why.