基本小费计算器 JavaScript答案

【问题标题】：Basic Tip Calculator JavaScript基本小费计算器 JavaScript
【发布时间】：2020-06-06 15:21:35
【问题描述】：

我非常基本的小费计算器无法正常工作。我觉得我的逻辑是正确的，语法应该没问题，但是我遗漏了一些东西，而且我已经花了太多时间在这上面。请帮忙。太感谢了。

<body>
<input type='number' placeholder='Total price' id='user-input'/>
<button id="calculator">Calculate the tip</button>
<h3 id='result'></h3>
<script>
  var userInput = document.getElementById('user-input');
  var button = document.getElementById('calculator');
  var h3El = document.getElementById('result');
  button.addEventListener('click', tipCalculator);
  function tipCalculator(){
    var tip = userInput * 0.1;
    h3El.innerHTML = tip;
  }
  tipCalculator();
</script>

【问题讨论】：

如果你告诉你什么不工作，你遇到什么错误，而不仅仅是 nu “它不工作”，那就太好了
当我输入一个数字并按下按钮时，它显示 NaN。它不做计算。
那是因为你是。将数字与 HTML 元素相乘，而不是数字

标签： javascript addeventlistener innerhtml getelementbyid

【解决方案1】：

改变这个

var userInput = document.getElementById('user-input');

到这里

var userInput = document.getElementById('user-input').value;

【讨论】：