How do I successfully pull values from inputs from HTML and use them in JavaScript?

Question

Here is my current code:

var drip = document.getElementById("years");
var slider = document.getElementById("rate");
var output = document.getElementById("dum");
var deed
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
//Formula for Interest Rate is Final = Amount(1+Interest Rate*No. of Years)

body{background-color:black;}
h1{color:grey;}
h1{font-family: Verdana,Geneva,sans-serif;}
div {background-color:white;}
div {border-radius: 35px;}
div div{margin-left: 260px}
div{font-family: Verdana,Geneva,sans-serif;}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>
      <center><h1><b>Simple Interest Calculator</b></h1></center>
      <div>
        Amount <input type="number" id="principal"><br>
        <br>
        Interest Rate <input type="range" min="0" max="20" value="50" class="slider" id="rate"><p id="dum"></p><br>
        <label for="years">No. of Years</label>
        <select name="years" id="years">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select><br>
        <br>
        <!--recheckthisInterest Rate: <span id="result"></span><br>-->
        <input type="button" value="Compute Interest" onClick="compute();">
      </div>
      <br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;© Everyone Can Get Rich
    </div>
    <script src="script.js"></script>
  </body>
</html>

I would like to have it when the compute button is pressed, values are taken from the respective inputs and calculated into interest. But I'm not sure how. I'm new to this and I can't really find anything that helps. I've tried to do '''var something = document.getElementById("input_id").value;''' but it does nothing to work. I can't even use it in functions properly.

Swagbronco RR2 · Answer 1 · 2021-04-24T14:51:46.463

This has already been answered here but I'll give you a quick explanation

This is your HTML input

Amount <input type="number" id="principal">

in javascript, you 'get' the input using the id, like this (to manipulate it or to obtain the value)

document.getElementByID("principal")

so the value of this would be the inputted value or the principal in your case.

var initialprincipal = document.getElementById("principal").value

where initialprincipal is the value you would use in this code.

Edit: I just tested the code, and everything works when you write a function for compute()

Here is the edited Javascript:

var drip = document.getElementById("years");
var slider = document.getElementById("rate");
var output = document.getElementById("dum");
var deed
output.innerHTML = slider.value;


slider.oninput = function() {
  output.innerHTML = this.value;
}
//Formula for Interest Rate is Final = Amount(1+Interest Rate*No. of Years)

function compute(){
    var initialprincipal = document.getElementById("principal").value
    console.log(initialprincipal)
    var finalamount = initialprincipal*(1+slider.value*drip.value)
    console.log(finalamount)
}

I have tried to code the compute function according to your comment. Hope this helps

No prob. I did the exact same thing when I started JS. I finished the project and added a code snippet as well so maybe check that out. — Swagbronco RR2, Apr 24 '21 at 14:53

score 0 · Accepted Answer · answered Apr 24 '21 at 14:41

I've printed the result in console, You can show on-page also. check the formula for calculating the interest. It may be wrong. I've just shown the way you should proceed.

var principal = document.getElementById("principal");
var drip = document.getElementById("years");
var slider = document.getElementById("rate");
var output = document.getElementById("dum");
var deed;
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
};
//Formula for Interest Rate is Final = Amount(1+Interest Rate*No. of Years)
function compute() {
  const p = principal.value;
  const r = slider.value;
  const t = drip.value;
  const interest = p * (1 + r * t);
  console.log(interest);
}

body {
  background-color: black;
}

h1 {
  color: grey;
}

h1 {
  font-family: Verdana, Geneva, sans-serif;
}

div {
  background-color: white;
}

div {
  border-radius: 35px;
}

div div {
  margin-left: 260px
}

div {
  font-family: Verdana, Geneva, sans-serif;
}

<div>
  <center>
    <h1><b>Simple Interest Calculator</b></h1>
  </center>
  <div>
    Amount <input type="number" id="principal"><br>
    <br> Interest Rate <input type="range" min="0" max="20" value="50" class="slider" id="rate">
    <p id="dum"></p><br>
    <label for="years">No. of Years</label>
    <select name="years" id="years">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select><br>
    <br>
    <!--recheckthisInterest Rate: <span id="result"></span><br>-->
    <input type="button" value="Compute Interest" onClick="compute();">
  </div>
  <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;© Everyone Can Get Rich
</div>

score 0 · Answer 3 · answered Apr 24 '21 at 14:46

First of all, You have not defined the compute function, you should do so. Secondly, you are taking the value of "this". Instead you should take the value of slider. Also, you may want to compute interest instead of printing the interest rate. I have left the computation upto you.

var drip = document.getElementById("years");
var slider = document.getElementById("rate");
var output = document.getElementById("dum");

function compute() {
  output.innerHTML = slider.value;
}
//Formula for Interest Rate is Final = Amount(1+Interest Rate*No. of Years)

body{background-color:black;}
h1{color:grey;}
h1{font-family: Verdana,Geneva,sans-serif;}
div {background-color:white;}
div {border-radius: 35px;}
div div{margin-left: 260px}
div{font-family: Verdana,Geneva,sans-serif;}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>
      <center><h1><b>Simple Interest Calculator</b></h1></center>
      <div>
        Amount <input type="number" id="principal"><br>
        <br>
        Interest Rate <input type="range" min="0" max="20" value="50" class="slider" id="rate"><p id="dum"></p><br>
        <label for="years">No. of Years</label>
        <select name="years" id="years">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select><br>
        <br>
        <!--recheckthisInterest Rate: <span id="result"></span><br>-->
        <input type="button" value="Compute Interest" onClick="compute();">
      </div>
      <br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;© Everyone Can Get Rich
    </div>
    <script src="script.js"></script>
  </body>
</html>

How do I successfully pull values from inputs from HTML and use them in JavaScript?

3 Answers3