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 les quieren pagar y obtengan el resultado de cuánto pagan por cada
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
lo siento por la señorita solo soy un principiante
FivePersent o bill_value , podemos nombrarlas como fivePersent o billValue . 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) }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>