变干，现在我的代码在Javascript中异常运行

Question

鉴于不再重复自己，我清理了代码，但现在每次运行结果以指数方式返回时，我都要运行计算。如果我突破了计算功能并硬编码了这些值，则代码将按预期运行。

这是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>

这是JS

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); 
       }
    }