Automatically updating the USD amount when changed using onchange event in JavaScript

Question

Automatically updating the USD amount when changed using onchange event in JavaScript

https://i.sstatic.net/SjxRl.pngI am struggling with this code and despite looking at numerous related questions, I have not found a solution that works. Can someone please assist me? Here are the specific things I need help with:

I need to automatically update the "Amount(USD)" when the value of "Amount(NGN)" is changed. Ideally, I would like to achieve this using Vanilla JS.
Additionally, I want to retrieve the final value of "Amount(USD)", store it in a PHP session, and use it on other pages.

Below is the code snippet I am working with:

<?php $grandTotal=10; ?>

<script type="text/javascript>
  function calculateTotal() {

    var nairaRate = document.pricecalculator.nairaRateToday.value; //get NGN rate today from admin and assign to nairaRate


    dollarValue = eval(document.pricecalculator.nairaInput.value * nairaRate); //multiply nairaInput by nairaRate to get dollarValue


    document.getElementById('dollar').innerHTML = dollarValue; //pass dollarValue to dollar to show auto-calculation onscreen
  }
</script>

<form name="pricecalculator" action="">
  <legend>Price Calculator (Buy BTC)</legend>
  <label>Amount (NGN)</label><input type="number" name="nairaInput" onchange="calculateTotal()" value="1" /> <br />
  <label>Amount (USD):</label><span id="dollar">1</span> <br />
  <input type="hidden" name="nairaRateToday" value="<?= $grandTotal ?>">
</form>

javascript auto-update

Answer 1

Answer №1

This problem was successfully resolved using the following method:

<?php $grandTotal=10; ?> // initializing PHP variable


        <form name="pricecalculator" action=""> 
            <legend>Price Calculator (Buy BTC)</legend>
            <label>Amount (NGN)</label><input type="number" id="naira-input" name="naira-input" onchange="calculateTotl()" value="1"/> <br />
            <label>Amount (USD):</label><span id="dollar">1</span> <br />
        </form>


        <script type="text/javascript">
            function calculateTotl() {
                var nairaRate = document.getElementById("naira-input").value;
                // Getting the current input

                let phpval = "<?= $grandTotal ?>"; // fetching PHP value
                
                    var dollarResult = document.querySelector('#dollar'); 
                    var total = Number(nairaRate) * Number(phpval); // calculating current input * php value
                  return dollarResult.innerHTML = total; // displaying result in #dollar element
                }
        </script>

Answer 2

This problem was successfully resolved using the following method:

<?php $grandTotal=10; ?> // initializing PHP variable


        <form name="pricecalculator" action=""> 
            <legend>Price Calculator (Buy BTC)</legend>
            <label>Amount (NGN)</label><input type="number" id="naira-input" name="naira-input" onchange="calculateTotl()" value="1"/> <br />
            <label>Amount (USD):</label><span id="dollar">1</span> <br />
        </form>


        <script type="text/javascript">
            function calculateTotl() {
                var nairaRate = document.getElementById("naira-input").value;
                // Getting the current input

                let phpval = "<?= $grandTotal ?>"; // fetching PHP value
                
                    var dollarResult = document.querySelector('#dollar'); 
                    var total = Number(nairaRate) * Number(phpval); // calculating current input * php value
                  return dollarResult.innerHTML = total; // displaying result in #dollar element
                }
        </script>

Answer 3

Answer №2

Check out this solution that has proven to be effective:

let euro = document.getElementById('euro');
let dollar = document.getElementById('dollar');
euro.onchange = ()=>{dollar.innerText=euro.value*0.0032}

Answer 4

Check out this solution that has proven to be effective:

let euro = document.getElementById('euro');
let dollar = document.getElementById('dollar');
euro.onchange = ()=>{dollar.innerText=euro.value*0.0032}

Answer 5

Answer №3

Review the code snippet provided below. A hardcoded value of 7 is used as the nairaRate

let nairaInput = document.querySelector("input[name='NairaValue']")

nairaInput.addEventListener('change', (e) => calculateTotal(e.target.value, 7))

function calculateTotal(input, nairaRate) {
  var resultInDollar = document.querySelector('#dollar');
  var total = Number(input) / Number(nairaRate);
  return resultInDollar.innerHTML = total
}

<form name="pricecalculator" action="">
  <legend>Price Calculator (Buy BTC) Naira At 7</legend>
  <label>Amount (NGN)</label><input type="number" name="NairaValue" onchange="calculateTotal()" value="0" /> <br />
  <label>Amount (USD):</label><span id="dollar">0</span> <br />
  <input type="hidden" name="nairaRateToday" value="<?= $grandTotal ?>">
</form>

Best of luck!

Answer 6

Review the code snippet provided below. A hardcoded value of 7 is used as the nairaRate

let nairaInput = document.querySelector("input[name='NairaValue']")

nairaInput.addEventListener('change', (e) => calculateTotal(e.target.value, 7))

function calculateTotal(input, nairaRate) {
  var resultInDollar = document.querySelector('#dollar');
  var total = Number(input) / Number(nairaRate);
  return resultInDollar.innerHTML = total
}

<form name="pricecalculator" action="">
  <legend>Price Calculator (Buy BTC) Naira At 7</legend>
  <label>Amount (NGN)</label><input type="number" name="NairaValue" onchange="calculateTotal()" value="0" /> <br />
  <label>Amount (USD):</label><span id="dollar">0</span> <br />
  <input type="hidden" name="nairaRateToday" value="<?= $grandTotal ?>">
</form>

Best of luck!

Automatically updating the USD amount when changed using onchange event in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

AngularJS secondary controller experiencing malfunctions

What is the best way to compile TypeScript files without them being dependent on each other?

The utility of commander.js demonstrated in a straightforward example: utilizing a single file argument

What is the best way to display multiple canvases on one page?

What is the process for configuring MySQL connections in Node.js to generate Out of Range errors when dealing with arithmetic operations involving unsigned integers?

Performing an Ajax post request to a PHP script in order to retrieve a PHP variable using XMLHttpRequest

Tips for including an external babel JS (ES6) file in an HTML document:

The Beauty of Organized Data: Understanding Multiple Columns in VUE JS Projects

How can I send a current variable through PHP?

Incorporating a stationary navigation bar alongside a parallax scrolling layout

How come the item I just inserted into a JavaScript array is showing up as undefined when I try to retrieve it immediately after adding it?

Determining the elapsed time using Momentjs

Exploring elements within a JavaScript array

Convert JavaScript to TypeScript by combining prototype-based objects with class-based objects

Searching for a way to detect when a user clicks the back button on their Android or iPhone device using JavaScript or

Steps for adding products to your shopping cart without using a JavaScript framework:

React: Error parsing - Missing closing JSX tag for <input> element

Tips for refreshing innerHTML without altering the entire content

Tips for effectively testing an Angular directive

Scanning barcode and Qrcode with Angular js HTML5 for seamless integration