为什么我不能从输入字段JavaScript获得数据

Question

我开始了一个挑战，这是一种餐馆的计算器用户输入账单金额和他们的号码，并使用他们想要支付的小费，他们得到的结果是他们为每个人付了多少钱。

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>

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

一些类被用于CSS文档

对不起，我只是一个初学者

Answer 1

• 首先，javascript使用camel套管命名。因此，我们可以将变量命名为fivePersent或billValue，而不是将其命名为FivePersent或bill_value。
• 你没有得到这个值的原因是你在脚本启动时抓取了这个值。当脚本启动时，输入字段的值为空。
因此，我们可以在点击按钮时获取值，而不是在开始时获取值，如下所示。

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

处理这个问题的另一种方法是:

• 使用事件监听器(带有事件委托)来避免重复代码
• 使用数据属性来避免JavaScript中的硬编码值
• 依赖CSS样式来增加可维护性

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