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