Question

我用输入和h1

创建了一个简单的html

<body>
  <input type="number" name="number">
  <h1>Result</h1>
  <button>Submit</button>
  <script type="text/javascript" src="kalantzakisCalculator.js"> 
  </script>
</body>

一个简单的计算。

const val = Number(document.getElementsByTagName('input')[0].value);
const h1 = document.querySelector('h1');
const button = document.querySelector('button');

button.addEventListener('click', function(val) {
 let result = val + (val * 0.2);
 h1.textContent = result;   
});

计算在h1 ....上没有正确显示。

Answer 1

当事件（click）调用回调函数时，不执行函数的外部代码，只执行函数内部的代码。

在函数内声明变量val：

const button = document.querySelector('button');
const h1 = document.querySelector('h1');
button.addEventListener('click', function() {
  const val = Number(document.getElementsByTagName('input')[0].value);
  let result = val + (val * 0.2);
  h1.textContent = result;   
});

<input type="number" name="number">
<h1>Result</h1>
<button>Submit</button>

Answer 2

val 参数是click事件的MouseEvent接口对象。

我已经重命名（val到inputNumber）并将其移到addEventListener中。下面的工作代码：

<body>
    <input type="number" name="number">
    <h1>Result</h1>
    <button>Submit</button>
    <script type="text/javascript"> 
        const h1 = document.querySelector('h1');
        const button = document.querySelector('button');

        // >>val<< is a MouseEvent
        button.addEventListener('click', function(val) { 
            let inputNumber = Number(document.getElementsByTagName('input')[0].value);
            let result = inputNumber + (inputNumber * 0.2);

            h1.textContent = result;   
        });
    </script>
</body>

提示：在Chrome中，使用F12代替Debugging。

简单的JS计算问题

2 个答案: