时间戳

首页 > 解决方案 > 为什么我无法从输入字段 JavaScript 获取数据

javascript - 为什么我无法从输入字段 JavaScript 获取数据

问题描述

我开始了一个挑战，这是一种计算器，供餐厅用户输入账单价值和他们的号码并使用他们想要支付给他们的小费的礼物他们得到他们为每个支付多少的结果

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

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

标签： javascript

解决方案

  • 首先，javascript使用camelCasing进行命名。因此，我们可以将它们命名为or ，而不是像FivePersentor那样命名变量。bill_valuefivePersentbillValue
  • 您没有获得该值的原因是您在脚本启动时获取了该值。当脚本启动时，输入字段的值为空。
  • 因此，我们可以在单击按钮时获取值，而不是在开始时获取值，如下所示。
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)
}

推荐阅读