why I can not get data from input field JavaScript

Question

I started a challenge which is a kind of calculator for restaurant users enter the bill value and their number and use the present of tip they want to pay them they get the result of how much they pay for each

HTML code

<input type="number" placeholder="0" class="enter billJS" id="n1">
<button class="percent-value n5 nJS1" name="b1">5%</button>
<button class="percent-value n10 nJS2" name="b2">10%</button>
<button class="percent-value n15 nJS3">15%</button>
<input type="number" placeholder="0" class="enter personJs" id="n2">
<div class="per-person">$0.00</div>
<div class="per-person pere-person">$0.00</div>

JavaScript code

var bill_value =document.querySelector(".billJS").value;
var NumberOfPeople = document.querySelector(".personJs").value;

var FivePersent = document.querySelector(".n5")
var TenPersent = document.querySelector(".n10")
var FifteenPersent = document.querySelector(".n15")

FivePersent.onclick = function(){
  FivePersent.setAttribute("style", "background-color: RGB(38,194,173)")

  document.querySelector(".per-person").innerHTML ="$"+ ((bill_value * 0.05)/NumberOfPeople).toFixed(2)
  document.querySelector(".pere-person").innerHTML ="$"+ ((bill_value*1.05)/NumberOfPeople).toFixed(2)
}

TenPersent.onclick = function multiply(){
  TenPersent.setAttribute("style", "background-color: RGB(38,194,173)")

  document.querySelector(".per-person").innerHTML = "$"+ ((bill_value * 0.1)/NumberOfPeople).toFixed(2)
  document.querySelector(".pere-person").innerHTML = "$"+ ((bill_value * 1.1)/NumberOfPeople).toFixed(2)
}

FifteenPersent.onclick = function multiply(){
  FifteenPersent.setAttribute("style", "background-color: RGB(38,194,173)")

  document.querySelector(".per-person").innerHTML = "$"+ ((bill_value * 0.15)/NumberOfPeople).toFixed(2)
  document.querySelector(".pere-person").innerHTML = "$"+ ((bill_value * 1.15)/NumberOfPeople).toFixed(2)
}

some of the classes were used for the CSS document

sorry for the miss I'm just a beginner

Answer 1

• First of all, javascript use camelCasing for naming. So instead of naming variables like FivePersent or bill_value, we can name them as fivePersent or billValue.
• The reason you are not getting the value is that you are grabbing the value when the script starts. And when the script starts the value of the input fields is empty.
• So instead of grabbing the value at the start, we can grab the value when we click the button, like below.

var billInput = document.querySelector(".billJS");

fivePersent.onclick = function(){
  const billValue = billInput.value;

  fivePersent.setAttribute("style", "background-color: RGB(38,194,173)")
  document.querySelector(".per-person").innerHTML ="$"+ ((billValue * 0.05)/numberOfPeople).toFixed(2)

  document.querySelector(".pere-person").innerHTML ="$"+ ((billValue * 1.05)/numberOfPeople).toFixed(2)
}

Answer 2

Here's an alternative way to handle this problem, which:

• Uses an event listener (with event delegation) to avoid repeating code
• Makes use of data-attributes to avoid hard-coding values in JavaScript
• Relies on CSS for styles to increase maintainability

// Identifies some DOM elements
const
  billInput = document.querySelector(".billJS"),
  peopleInput = document.querySelector(".personJS"),
  buttonsContainer = document.getElementById("buttons-container"),
  buttons = document.querySelectorAll(".percent"),
  tipOutput = document.querySelector(".tip-per-person"),
  totalOutput = document.querySelector(".total-per-person");

// Calls `calcPerPerson` when anything in buttonsDiv is clicked
buttonsContainer.addEventListener("click", calcPerPerson);

// Defines `calcPerPerson`
function calcPerPerson(event){ // Listener can access triggering event
  const clickedThing = event.target; // Event has useful properties

  // Ignores irrelevant clicks
  if(!clickedThing.classList.contains("percent")){ return; }

  // Removes all highlighting (so user can click more than one button)
  for(let button of buttons){ button.classList.remove("highlight"); }
  // Adds a CSS class to style the target
  clickedThing.classList.add("highlight");

  // Calculates values
  const
    // Accesses `data-percent` attribute via dataset property
    multiplier = clickedThing.dataset.percent / 100,
    billAmount = billInput.value,
    numPeople = peopleInput.value,
    // Uses condtional operator (?:) to avoid division by zero
    billPerPerson = (numPeople > 0) ? (billAmount / numPeople) : 0,
    tipPerPerson = multiplier * billPerPerson,
    totalPerPerson = billPerPerson + tipPerPerson;

  // Updates output divs with new values
  tipOutput.textContent = `$${tipPerPerson.toFixed(2)}`;
  totalOutput.textContent = `$${totalPerPerson.toFixed(2)}`;
}

div{ margin-bottom: 0.2em; }
span{font-weight: bold; }
#buttons-container{ margin-bottom: 1em; }
.highlight{ background-color: rgb(38, 194, 73); }

<div>
  <label>
    Bill amount: <input value="20.00" class="billJS">
  </label>
</div>
<div>
  <label>
    Party size: <input type="number" value="2" class="personJS">
  </label>
</div>
<div id="buttons-container">
  <button class="percent" data-percent="15">15%</button>
  <button class="percent" data-percent="20">20%</button>
  <button class="percent" data-percent="25">25%</button>
</div>
<div>
  Tip per person: <span class="tip-per-person">$0.00</span></div>
<div>
  Total per person: <span class="total-per-person">$0.00</span>
</div>