Comencé un desafío que es una especie de calculadora para que los usuarios de restaurantes ingresen el valor de la factura y su número y usen el presente de la propina que quieren pagarles obtienen el resultado de cuánto pagan por cada uno

Código HTML

<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>

Código JavaScript

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)
}

Algunas de las clases se utilizaron para el documento CSS

Perdón por la señorita, solo soy un principiante

2
Ali_Elsharkawy 5 oct. 2021 a las 07:06

2 respuestas

La mejor respuesta
  • En primer lugar, javascript usa camelCasing para nombrar. Entonces, en lugar de nombrar variables como FivePersent o bill_value, podemos nombrarlas como fivePersent o billValue.
  • La razón por la que no obtiene el valor es porque lo está tomando cuando se inicia el script. Y cuando se inicia el script, el valor de los campos de entrada está vacío.
  • Entonces, en lugar de tomar el valor al principio, podemos tomar el valor cuando hacemos clic en el botón, como se muestra a continuación.
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)
}
1
Mohib Arshi 5 oct. 2021 a las 07:00

Aquí hay una forma alternativa de manejar este problema, que:

// 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>
0
Cat 5 oct. 2021 a las 06:34