干涸了,现在我的代码在Javascript中出人意料地运行

干涸了,现在我的代码在Javascript中出人意料地运行,javascript,Javascript,为了不重复我自己,我清理了我的代码,但现在每次运行计算时,结果都会以指数形式返回。如果我中断计算函数并硬编码值,代码将按预期运行 这是HTML <select id='cameraMakes'></select> <p id="demo"></p> <input id="length" type="text" name="lens" placeholder="Enter lens focal length

为了不重复我自己,我清理了我的代码,但现在每次运行计算时,结果都会以指数形式返回。如果我中断计算函数并硬编码值,代码将按预期运行

这是HTML

     <select id='cameraMakes'></select>
     <p id="demo"></p>
        <input id="length" type="text" name="lens" placeholder="Enter lens focal length to calculate" /><br>
        <input id="calculate" type="submit" value="Calculate" />
        <p id='here'></p>
        <script src="script.js" async defer></script>
    </body>
</html>
calculate()
函数每次调用时都会添加另一个“输入”事件侦听器。
.addEventListener()
函数不会删除以前添加的事件侦听器。。。。“输入”处理程序本身添加了更多的“点击”事件处理程序。从事件处理程序内部添加事件处理程序几乎总是一个错误。
const cameraMakeArray = ['Canon5DM2', 'PanasonicGH5', 'SonyA7CropMode']
    const cameraMake = document.getElementById("cameraMakes")
    cameraMakeArray.forEach(camera => {
        let opt = document.createElement('option');
        opt.innerHTML = camera;
        opt.value = camera;
        cameraMake.appendChild(opt);
    })

    const calculate = (crop, num) => {
          let crops = crop
          let nums = num
          document.getElementById("demo").innerHTML = `Your sensor is a ${crops}x crop`
          length.addEventListener("input", function() {
              let lengths = document.getElementById("length").value;
              nums = lengths * nums;
              button.addEventListener("click", function() {
                  document.getElementById("here").innerHTML = nums;
                  })
          });
        }

    cameraMake.onchange = function() {
       let camera = document.getElementById("cameraMakes").value;
       if (camera === 'PanasonicGH5') {
        calculate(2, 2);

    } else if (camera === 'SonyA7CropMode') {
           calculate(1.5, 1.5);


       } else {
        calculate(1 ,1); 
       }
    }