Javascript 如何将此内联JS移动到文件中

我有这个（简化的）内联JS，我想把它移到一个JS文件中。尝试清理内联JS和CSS

<td><input type="number" id="total" class="main-input" onkeyup="calculate(this.value)" /> </td>

但它不起作用。。。它将其读取为0

---

我也试过用AddEventListener。。运气不好，试试这个。使用addEventListener，我在下面编写了一个简单的代码，只是为了在控制台上打印keyup

document.getElementById（“total”）.addEventListener（'keyup'，function（）{console.log（'func called'）}）
尝试使用
addEventListener
：

const total=document.getElementById（“total”）；
total.addEventListener（“键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键{
console.log（total.value）；
});

如您所见，您应该在事件侦听器的回调函数中访问
total
的值，以便始终可以使用更新后的值。否则，在您的代码中，
totalValue
在第一次运行时会被分配一个值，但不会再次运行。因此，无论您在输入字段中写入什么，值都将始终保持不变。要实现这一点，请尝试将其作为实验运行：

const total=document.getElementById（“total”）；
常量值=总值
total.addEventListener（“键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键{
console.log（值）；
});

执行此javascript文件后，
值
被设置为
总计
输入字段的值，该字段为空字符串（
“
）。因此，每当您在输入字段上有一个keyup事件时，它都会注销一个空字符串

通过向事件侦听器访问回调函数中的
total
值，可以避免此问题。
代码的问题：

//将输入的初始值存储在`totalValue'中`
totalValue=parseInt（document.getElementById（“total”）.value）；
//这将在每次键控时调用更新，但使用初始值
//脚本第一次运行时存储的
document.getElementById（“total”）.onkeyup=function（）{calculate（totalValue）}；

但要补充一些建议：


使用
const
/
let
声明变量。在其他好处中，它强制你变得更有条理
只从DOM中获取元素一次，并将其存储为变量。微小的性能改进，微小的可读性和清洁度改进
使用
addEventListener
，它允许添加多个侦听器，即不覆盖上一个侦听器

因此，我建议如下：

const totalInput = document.getElementById('total')

// Using a named function allows to also detach event if needed
totalInput.addEventListener('keyup', handleKeyupOnTotalInput)

function handleKeyupOnTotalInput() {
    const value = parseInt(totalInput.value)
    calculate(value)
}

// But if you prefer shorter, you could do this:
// totalInput.addEventListener('keyup', _ => calculate(parseInt(totalInput.value)))

或者甚至将所有内容压缩到一条语句中（但为了可读性，将其拆分为多行）：

文档
.getElementById（'total'）
.addEventListener（'keyup'，event=>calculate（parseInt（event.target.value）））
您是否检查了浏览器工具中的javascript错误？在上面的代码中，您应该确保使用
let
、
const
或
var
关键字声明
const totalValue=…
变量。否则它是一个“未声明的变量”，这意味着它是在全局范围内创建的，这通常是一件坏事。谢谢，我尝试过类似的方法，但不确定我做错了什么。我复制了你的示例并添加了这个。值，它成功了！！document.getElementById（“total”）.addEventListener（'keyup'，function（）{calculate（this.value）}）；嘿，谢谢你花时间回答。我成功地做到了这一点，没有额外的一行拾取.value-document.getElementById（“total”）.addEventListener（'keyup'，function（）{calculate（this.value）}）；
totalValue = parseInt(document.getElementById("total").value);
document.getElementById("total").onkeyup = function() {calculate(totalValue)};

const totalInput = document.getElementById('total')

// Using a named function allows to also detach event if needed
totalInput.addEventListener('keyup', handleKeyupOnTotalInput)

function handleKeyupOnTotalInput() {
    const value = parseInt(totalInput.value)
    calculate(value)
}

// But if you prefer shorter, you could do this:
// totalInput.addEventListener('keyup', _ => calculate(parseInt(totalInput.value)))