JavaScript 语法问题 - 提示计算器答案

【问题标题】：JavaScript syntax problem - Tip CalculatorJavaScript 语法问题 - 提示计算器
【发布时间】：2020-05-14 01:50:59
【问题描述】：

请问，你们能解释一下这个语法/表达式问题吗？我正在练习，我试图创建一个小费计算器，它会根据账单价值和百分比给我一个小费值。我不明白为什么变量 finalValues1 中的表达式不起作用。 JSFiddle code result。非常感谢。

document.getElementById('myForm').addEventListener('submit', function (e) {
    e.preventDefault();    

    var bill, tip, percentage, finalValues1,  finalValues2;    
    bill = document.getElementById('bills').value;        

    if (bill < 50) { // if bill less $50, give tip of 20%.
        percentage = .2;

    } else if (bill > 50 && bill < 200) { // if bill greater $50 and less than $200, give tip of 15%. 
        percentage = .15; 

    }  else  {
        percentage = .1; // if bill greater than $200, give tip of 10%.

    }    

    tip = bill * percentage;

    // I want also to display the final value bills plus tip
    finalValues1 = bill + tip; // This code does not work, it is concatenating bills and tip. 
    finalValues2 = bill * 1 + tip; // this code works and it sums bill plus tip. WHY is that?
    document.getElementById('demo').innerHTML = "Tip: " + tip + " and total bill plus tip test1: " + finalValues1 + " test2: " + finalValues2 ; 

});

【问题讨论】：

简单的答案是输入value 返回一个字符串。为了进行数字加法，您需要先将其转换为数字。有很多方法可以转换为数字……都很容易研究。 "10" + 1 返回字符串 "101"
谢谢。我错过了一些非常简单的东西......元素输入返回一个字符串。我对这个输入 type="number" 感到困惑，它只是为了验证目的。过去几年我可能跳过了这个解释。

标签： javascript syntax operators

【解决方案1】：

bills.value 是一个字符串，而不是一个数字
如果您想获得号码，请使用 bills。valueAsNumber
代码：

const myForm = document.getElementById('my-form')

myForm.onsubmit=e=>
  {
  e.preventDefault()
  let bill       = myForm.bills.valueAsNumber 
    , percentage = (bill < 50) ? 0.2 : (bill < 200) ? 0.15 : 0.1
    , tip        = bill * percentage
    ;
  myForm.demo.textContent = `Tip: ${tip.toFixed(2) } ___ total (bill + tip): ${(bill + tip).toFixed(2)}`
  }

<form id="my-form" >
  <output name="demo">???</output>
  <br>
  <br>  
  <label for="bills">Bill Value :</label>
  <input name="bills" autocomplete="off" type="number" required  step="0.01">
  <br>
  <br>  
  <button type="submit">submit</button>
 
</form>

如您所见，使用表单名称而不是元素 ID 更容易

【讨论】：

【解决方案2】：

改用这个finalValues1 = Math.parseFloat(bill) + Math.parseFloat(tip);

它将强制您的代码将这两个变量都视为浮点数（十进制数），而不是字符串。

【讨论】：

【解决方案3】：

我会这样做：

function TipCalc(percent = 20){
  this.percent = percent; this.tip = this.total = 0;
  this.calc = bill=>{
    let t = this.percent/100*bill;
    this.tip = t.toFixed(2); this.total = (bill+t).toFixed(2);
    return this;
  }
}
const tc = new TipCalc;
function billTest(bill){
  let p;
  if(bill < 50){
    p = 20;
  }
  else if(bill < 200){
    p = 15; 
  }
  else{
    p = 10;
  }
  tc.percent = p; tc.calc(bill);
  console.log({percent:p, tip:tc.tip, total:tc.total});
}
billTest(15.72); billTest(200.01); billTest(50.01);

注意tipCalcInstance.tip 和tipCalcInstance.total 是字符串。

【讨论】：

【解决方案4】：

您需要将值解析为浮点数bill = parseFloat(document.getElementById('bills').value);

你真的应该在小数点的开头有 0。

您还需要检查您的操作顺序finalValues2 = bill * 1 + tip；

由于首先应用乘法，因此它始终为 (bill * 1) + tip。

改成bill * (1 + tip)

【讨论】：