来自表单输入的Javascript getElementByID

我提供了一个表单，用户可以在其中输入算术计算。再往下，一旦用户点击回车键，结果就会出现。这可能只是语法问题，但我找不到错误。以下是我迄今为止所做的：

你想计算什么

在此处键入：
num_field=document.getElementById（“计算”）；
num_field.onsubmit=函数（）
{
document.getElementById（“显示结果”）.innerHTML=num\u字段；
}

因此，用户应输入例如“1+2”。结果如下所示。 知道我的错在哪里吗

致以最诚挚的问候

这应该可以：

calc=document.getElementById（“calc”）；
公式=document.getElementById（“公式”）；
calc.addEventListener（'单击'，函数（））{
document.getElementById（“显示结果”）.innerHTML=eval（formula.value）；
});
您想计算什么

在此处键入：
计算
这应该可以：


calc=document.getElementById（“calc”）；
公式=document.getElementById（“公式”）；
calc.addEventListener（'单击'，函数（））{
document.getElementById（“显示结果”）.innerHTML=eval（formula.value）；
});
您想计算什么

在此处键入：
计算
尝试以下操作：


var calculation\u input=document.getElementById（'calculation\u input'）；
计算\u input.onkeydown=函数（事件）{
如果（event.keyCode==13）{//输入key。
//使用eval（）前进行消毒
var calculation=calculation_input.value.replace（/[^-（）\d/*+.]/g'）；
document.getElementById（“显示结果”）.innerHTML=eval（计算）；
}
}
您想计算什么

在此处键入：
尝试以下操作：


var calculation\u input=document.getElementById（'calculation\u input'）；
计算\u input.onkeydown=函数（事件）{
如果（event.keyCode==13）{//输入key。
//使用eval（）前进行消毒
var calculation=calculation_input.value.replace（/[^-（）\d/*+.]/g'）；
document.getElementById（“显示结果”）.innerHTML=eval（计算）；
}
}
您想计算什么

在此处键入：
您就快到了，您的代码只需要稍微调整一下-请参见下文（代码中的注释说明我所做的以及原因）

以下似乎是一种替代且更安全的方法，无需使用eval（函数取自）：



你想计算什么

在此处键入：
表单=document.getElementById（“表单”）；
num_field=document.getElementById（“计算”）；
form.onsubmit=function（）{//将此事件附加到表单
document.getElementById（“display_result”）.innerHTML=evalAlternate（num_field.value）；//在此处添加.value以获取文本框的值
return false；//return false，这样表单就不会实际提交，而您将停留在同一页面上（否则，在重新加载页面时，您的显示结果将不会更新
}
函数evalAlternate（fn）{//从这里取函数eval的替代值：https://stackoverflow.com/questions/6479236/calculate-string-value-in-javascript-not-using-eval
fn=fn.replace（//g，“”）；
fn=fn.replace（/（\d+）\ ^（\d+）/g，“Math.pow（$1，$2）”；
返回新函数（'return'+fn）（）；
}

您就快到了，您的代码只需要稍微调整一下-请参见下文（代码中的注释，如我所做的以及为什么要这样做）

以下似乎是一种替代且更安全的方法，无需使用eval（函数取自）：



你想计算什么

在此处键入：
表单=document.getElementById（“表单”）；
num_field=document.getElementById（“计算”）；
form.onsubmit=function（）{//将此事件附加到表单
document.getElementById（“display_result”）.innerHTML=evalAlternate（num_field.value）；//在此处添加.value以获取文本框的值
return false；//return false，这样表单就不会实际提交，而您将停留在同一页面上（否则，在重新加载页面时，您的显示结果将不会更新
}
函数evalAlternate（fn）{//从这里取函数eval的替代值：https://stackoverflow.com/questions/6479236/calculate-string-value-in-javascript-not-using-eval
fn=fn.replace（//g，“”）；
fn=fn.replace（/（\d+）\ ^（\d+）/g，“Math.pow（$1，$2）”；
返回新函数（'return'+fn）（）；
}

参见下面的小提琴


看下面的小提琴


下面是你如何做到这一点的

eval
是执行此操作的最佳方法，但使用
eval
有风险，因此请确保在使用
eval
之前清除输入值

我使用这个正则表达式
/（^[-+/*0-9]+）/g
只提取数字和少数运算符
（++/*）
，并对该值进行求值

删除不需要的
使用
按键
事件侦听器并检查enter键。enter键的keycode为13


num_field=document.getElementById（“计算”）；
num_field.onkeypress=函数（e）{
如果（e.which==13）
{
var value=num_field.value.match（/（^[-+/*0-9]+）/g）；
如果（！value）返回；
else值=值[0]；
var res=评估（价值）；
document.getElementById（“显示结果”）.innerText=res；
}
}
您想计算什么

在此处键入：
以下是实现这一目标的方法

eva
num_field = document.getElementById("calc");
num_field.onkeydown = (event) => {
    if (event.keyCode === 13) {
        document.getElementById("display_result").innerHTML = eval(num_field.value);
        return false;
    }
}