How do I get innerHTML to display my output? [closed]

Question

I'm fairly new to JS and I cannot figure out why my innerHTML is not displaying any output to my 4 input text fields. The ID values for all of the text fields match to the document.getElementByID values, but they aren't getting displayed.

document.getElementById('calculate').addEventListener('click', calculateCoins)

function calculateCoins (){
    
    //converts cents value from string to Int
    var cent = parseInt(document.getElementById('cents').value, 10);
    
    /*
    calculates # of quarters, displays # of quarters, 
    and calculates the remainder money
    */
    let quarterAmount = Math.floor(cent / 25);
    document.getElementById('quarters').innerHTML = quarterAmount;
    let quarterRemainder = cent % 25;

    /*
    calculates # of dimes, displays # of dimes, 
    and calculates the remainder money
    */
    let dimeAmount = Math.floor(quarterRemainder / 10);
    document.getElementById('dimes').innerHTML = dimeAmount;
    let dimeRemainder = quarterRemainder % 10;

    /*
    calculates # of nickels, displays # of nickels, 
    and calculates the remainder money
    */
    let nickelAmount = Math.floor(dimeRemainder / 5);
    document.getElementById('nickels').innerHTML = nickelAmount;
    let nickelRemainder = dimeRemainder % 5;

    /*
    calculates # of pennies and displays # of pennies
    */
    let pennyAmount = Math.floor(nickelRemainder / 1);
    document.getElementById('pennies').innerHTML = pennyAmount;

    console.log(quarterAmount);
    console.log(quarterRemainder);
    console.log(dimeAmount);
    console.log(dimeRemainder);
    console.log(nickelAmount);
    console.log(nickelRemainder);
    console.log(pennyAmount);
    
}

Answer 1

To update the input field use .value not .innerHTML

 document.getElementById('pennies').value = pennyAmount;

Answer 2

For forms, you need to use the value property instead of the innerHTML property. This is because innerHTML changes the inside code of the tags, while value changes the value attribute of the input.

An example of this is below.

document.querySelector("#text").value = "I'm text!";

<input type="text" name="text" id="text" placeholder="Enter any text here..." />

Also, the value property can also be read to see the current text inputted by the user.

---

Extra: I also just noticed the below line from your code.

let pennyAmount = Math.floor(nickelRemainder / 1);

This code is actually not nessecary, as division by one is basically just the same number, and flooring it will not change the result.

Answer 3

This may be one possible solution to achieve the desired objective:

This uses document.getElementById(k).value = <<calculated value>>; rather than innerHTML.

Code Snippet

const coins = Object.fromEntries('quarters:25, dimes:10, nickels:5, pennies:1'
  .split(',')
  .map(ob => ob.split(':'))
  .map(([k, v]) => ([k.trim(), {divisor: v, val: 0}])));
  
const getQR = (num, divisor) => ([
  Math.floor(num / divisor), num % divisor
]);

const calculateCoins = () => {
  const userInput = +document.getElementById('cents').value.toString();
  coins.quarters.val = userInput;
  Object.entries(coins).
  forEach(([k, {divisor, val}], idx, selfArr) => {
    const [d, r] = getQR(val, divisor);
    document.getElementById(k).value = d; 
    if (idx + 1 < selfArr.length) selfArr[idx+1][1].val = r;
  });
};

document.getElementById('calculate').addEventListener('click', calculateCoins)

.outer { display: flex; flex-direction: column }
input { width: fit-content; margin: 25px 5px 5px; border: 2px solid black; }
button { width: fit-content; margin: 10px; }

<div class="outer">
<input id="cents">Enter num of cents</input>
<input id="quarters" >Num of quarters</input>
<input id="dimes" >Num of dimes</input>
<input id="nickels" >Num of nickels</input>
<input id="pennies" >Num of pennies</input>


<button id="calculate">Get coins</button>
</div>

Explanation

• This solution uses a coins object generated by using known information
• Each coin has multiple attributes
• The entries of this object are iterated in order to obtain the HTML element information required to render.
• Results of the calculation are stored in val for next iteration.

Answer 4

Take a look at this, it worked for me

// Elements
const calculate = document.getElementById("calculate");
const centsEl = document.getElementById("cents");
const quartersEl = document.getElementById("quarters");
const dimesEl = document.getElementById("dimes");
const nickelsEl = document.getElementById("nickels");
const penniesEl = document.getElementById("pennies");

calculate.addEventListener("click", calculateCoins);

function calculateCoins() {
  const cents = Number(centsEl.value);
  // Quarters calc
  let quarterAmount = Math.floor(cents / 25);
  quartersEl.innerHTML = quarterAmount;
  let quarterRemainder = cents % 25;

  // Dimes calc
  let dimeAmount = Math.floor(quarterRemainder / 10);
  dimesEl.innerHTML = dimeAmount;
  let dimeRemainder = quarterRemainder % 10;

  // Nickels calc
  let nickelAmount = Math.floor(dimeRemainder / 5);
  nickelsEl.innerHTML = nickelAmount;
  let nickelRemainder = dimeRemainder % 5;

  // Pennies calc
  let pennyAmount = Math.floor(nickelRemainder / 1);
  penniesEl.innerHTML = pennyAmount;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <input type="text" id="cents" />
      <button id="calculate">Calculate</button>
      <h5>Quarters</h5>
      <div id="quarters"></div>
      <h5>Dimes</h5>
      <div id="dimes"></div>
      <h5>Nickels</h5>
      <div id="nickels"></div>
      <h5>Pennies</h5>
      <div id="pennies"></div>
    </div>

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