Displaying user input in the table form using Javascript DOM

Question

i have trouble displaying users' input and have spent some time looking at it and unsure which part had gone wrong. I am supposed to display the "Result" word in green and display user's input in a form of table. I used document.getElementsByClassName('container').innerHTML to add new element in the homepage. Could anyone explain why the word Result and table doesn't show?

My code:

/*** Home ***/
<!DOCTYPE html>
     
<html>
     <head>

          <!-- Required meta tags -->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
          <!-- Bootstrap CSS -->
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
              integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
      
          <script src="mhsavings.js"></script>

     </head>

     <style>
        .main-content{
            width:70%;
            /* background-color: lightblue; */
            text-align: center;
        }

     </style>

     <body>
        <div class="container main-content">
            <h1 style="margin-top:40px;  margin-bottom: 30px;">Savings</h1>
            <h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>

            <form>
                <div class="input-group" style='margin-bottom: 16px;'>
                    <span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
                    <input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
                  </div>
                  
                  <div class="input-group" style='margin-bottom: 16px;'>
                    <span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
                    <input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
                  </div>
                  
                  <div class="input-group" style='margin-bottom: 16px;'>
                    <span class="input-group-text" id="basic-addon3">My Goal</span>
                    <input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
                  </div>

                  <button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
                
            </form>
            
        </div>  

     </body>
</html>


/*** in JS file ***/


function calculate(){
    'use stict';
    var initialAmt = document.getElementById("initialAmt");
    var yearlyInt = document.getElementById("yearlyInt");
    var goal = document.getElementById("goal");
    console.log(goal.value);

    var receive = Math.round(initialAmt, 2);
    var years = 0;
    while (receive < goal) {
        receive *= (1 + yearlyInt);
        years += 1;
    }

    // console.log(document.getElementsByClassName('container'));
    document.getElementsByClassName('container').innerHTML = "<h3 style='color:green; margin-bottom: 20px'>Result</h3>";
    document.getElementsByClassName('container').innerHTML = `<table style='width: 500px'>
    <tr>
        <th>You will achieve your goal in (years):</th>
        <td>${years}</td>
    </tr>
    <tr>
        <th>You will get ($):</th>
        <td>${receive}</td>
    </tr>
    </table>`;

}

a couple of things.. you are using the html elements as number values.. you should fetch the input values doing `el.value` and passing the string to `parseInt()`. Then getElement***s***ByClassName returns a list.. while you need the actual element if you are accessing to the innerHTML property. — Diego D, Sep 19 '22 at 07:59
https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — Teemu, Sep 19 '22 at 08:00

flyingfox · Answer 1 · 2022-09-19T08:11:01.670

Beside the comments from other user posted in your original question,you code has many incorrect points:

You need to use value to get the input value,so change var initialAmt = document.getElementById("initialAmt"); to var initialAmt = document.getElementById("initialAmt").value;
When use innerHTML,you need to append the value,make sure not to override it

function calculate(){
    'use stict';
    var initialAmt = parseInt(document.getElementById("initialAmt").value);
    var yearlyInt = parseInt(document.getElementById("yearlyInt").value);
    var goal = parseInt(document.getElementById("goal").value);
    
    var receive = Math.round(initialAmt, 2);
    var years = 0;
    while (receive < goal) {
        receive *= (1 + yearlyInt);
        years += 1;
    }

    // console.log(document.getElementsByClassName('container'));
    var result = document.createElement("div");
    var content = "<h3 style='color:green; margin-bottom: 20px'>Result</h3>";
    content += `<table style='width: 500px;border:1px'>
    <tr>
        <th>You will achieve your goal in (years):</th>
        <td>`+years+`</td>
    </tr>
    <tr>
        <th>You will get ($):</th>
        <td>`+receive+`</td>
    </tr>
    </table>`;
    result.innerHTML = content;
    document.getElementsByClassName('container')[0].appendChild(result);

}

<!DOCTYPE html>
     
<html>
     <head>

          <!-- Required meta tags -->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
          <!-- Bootstrap CSS -->
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
              integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
      
          <script src="mhsavings.js"></script>

     </head>

     <style>
        .main-content{
            width:70%;
            /* background-color: lightblue; */
            text-align: center;
        }

     </style>

     <body>
        <div class="container main-content">
            <h1 style="margin-top:40px;  margin-bottom: 30px;">Savings</h1>
            <h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>

            <form>
                <div class="input-group" style='margin-bottom: 16px;'>
                    <span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
                    <input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
                  </div>
                  
                  <div class="input-group" style='margin-bottom: 16px;'>
                    <span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
                    <input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
                  </div>
                  
                  <div class="input-group" style='margin-bottom: 16px;'>
                    <span class="input-group-text" id="basic-addon3">My Goal</span>
                    <input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
                  </div>

                  <button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
                
            </form>
            
        </div>  

     </body>
</html>

score 1 · Answer 2 · answered Sep 19 '22 at 08:05

#1: name of function not the function execution!

<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>

to

<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate">Calculate</button>

#2: getElementsByClassName returns a collection not an element!

#3: lacking of parseInt before calculating

bron · Answer 3 · 2022-09-19T09:53:48.427

Using your functio, you may use this code

form fields are text fields. With parseInt() a text string is converted into an integer.
Below I added an extra <div id="result"></div> but if you want to use the container div, you can target this div with document.querySelector(".container").innerHTML = .... This will select the first class with that name. Note that this will replace all html code in the form!

function calculate(){
    'use stict';
    let initialAmt = parseInt( document.getElementById("initialAmt").value );
    let yearlyInt = parseInt( document.getElementById("yearlyInt").value );
    let goal = parseInt( document.getElementById("goal").value );

    let receive = Math.round(initialAmt, 2);
    let years = 0;
    while (receive < goal) {
        receive *= (1 + yearlyInt);
        years += 1;
    }

    let result = '<h3 style="color:green; margin-bottom: 20px">Result</h3><table style="width: 500px"><tr><th>You will achieve your goal in (years):</th><td>' + years + '</td></tr><tr><th>You will get ($):</th><td>' + receive + '</td></tr></table>';
    document.getElementById("result").innerHTML = result;
}

.main-content{
    width:70%;
    /* background-color: lightblue; */
    text-align: center;
}

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container main-content">
    <h1 style="margin-top:40px;  margin-bottom: 30px;">Savings</h1>
    <h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>

    <form>
        <div class="input-group" style='margin-bottom: 16px;'>
            <span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
            <input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
        </div>
          
        <div class="input-group" style='margin-bottom: 16px;'>
            <span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
            <input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
        </div>
          
        <div class="input-group" style='margin-bottom: 16px;'>
            <span class="input-group-text" id="basic-addon3">My Goal</span>
            <input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
        </div>

        <button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
        
    </form>
    
    <div id="result"></div>
    
</div>

Displaying user input in the table form using Javascript DOM

3 Answers3