Javascript 如何缩短这些函数_Javascript_Function

Javascript 如何缩短这些函数

javascript function

Javascript 如何缩短这些函数,javascript,function,Javascript,Function,我在做一个简单的计算器，每个数字有两个输入框，下面每个操作有四个按钮。按下其中一个按钮（例如：Add）后，他们将执行该操作。然而，在每个函数中，我必须继续写这两行： var Value1 = document.getElementById('Value1').valueAsNumber; var Value2 = document.getElementById('Value2').valueAsNumber; 在我创建每个单独的函数之前，有没有一种方法可以编写这些函数？能不能请一个技术更高的人

我在做一个简单的计算器，每个数字有两个输入框，下面每个操作有四个按钮。按下其中一个按钮（例如：Add）后，他们将执行该操作。然而，在每个函数中，我必须继续写这两行：

var Value1 = document.getElementById('Value1').valueAsNumber;
var Value2 = document.getElementById('Value2').valueAsNumber;

在我创建每个单独的函数之前，有没有一种方法可以编写这些函数？能不能请一个技术更高的人给我看看我能做什么

函数添加（）{
var Value1=document.getElementById（'Value1'）.valueAsNumber；
var Value2=document.getElementById（'Value2'）.valueAsNumber；
var总计=值1+值2；
document.getElementById（'demo'）.innerHTML=“总计：”+Total；
}
函数子（）{
var Value1=document.getElementById（'Value1'）.valueAsNumber；
var Value2=document.getElementById（'Value2'）.valueAsNumber；
var总计=值1-值2；
document.getElementById（'demo'）.innerHTML=“总计：”+Total；
}
函数mul（）{
var Value1=document.getElementById（'Value1'）.valueAsNumber；
var Value2=document.getElementById（'Value2'）.valueAsNumber；
var总计=值1*2；
document.getElementById（'demo'）.innerHTML=“总计：”+Total；
}
函数div（）{
var Value1=document.getElementById（'Value1'）.valueAsNumber；
var Value2=document.getElementById（'Value2'）.valueAsNumber；
var总计=值1/值2；
document.getElementById（'demo'）.innerHTML=“总计：”+Total；
}

第一个号码：


第二个号码：


添加
减
乘
分

在我创建每个单独的函数之前，有没有一种方法可以编写这些函数

您只需获得一次元素：

const input1 = document.getElementById("Value1");

然后，当您需要它的值时：

const value1 = input1.valueAsNumber;

通常，您可以编写一个函数来避免重复的逻辑。在这种情况下可能不合适，但例如：

function getValueAsNumber(id) {
    return document.getElementById(id).valueAsNumber;
}

然后

以下是一些旁注：

在JavaScript和相关语言中，压倒性的惯例是对不引用构造函数的变量使用小写字母。因此
```
value1
```
而不是
```
value1
```
，
```
value1Element
```
而不是
```
value1Element
```
，等等
```
var
```
不再是JavaScript中的最佳实践。在新代码中，首选
```
let
```
或
```
const
```
，因为它们的作用域更有用
当在元素中放置纯文本时，最好使用
```
textContent
```
而不是
```
innerHTML
```
，因为浏览器不会尝试将您提供给它的文本解析为HTML
```
onxyz
```
-属性样式的事件处理程序不是最佳实践，尤其是因为它们调用的函数必须是全局函数，并且全局命名空间很拥挤。考虑使用现代事件处理（等等）。

仅举一个例子，以下是您的代码，其中应用了上述部分内容，但没有过火：

const gid=id=>document.getElementById（id）；
常量输入1=gid（“值1”）；
常量输入2=gid（“值2”）；
const demo=gid（“demo”）；
gid（“添加”）.addEventListener（“单击”，（）=>{
const total=input1.valueAsNumber+input2.valueAsNumber；
demo.textContent=“总计：”+总计；
});
gid（“子”）.addEventListener（“单击”，（）=>{
const total=input1.valueAsNumber-input2.valueAsNumber；
demo.textContent=“总计：”+总计；
});
gid（“mul”）.addEventListener（“单击”，（）=>{
const total=input1.valueAsNumber*input2.valueAsNumber；
demo.textContent=“总计：”+总计；
});
gid（“div”）.addEventListener（“单击”，（）=>{
const total=input1.valueAsNumber/input2.valueAsNumber；
demo.textContent=“总计：”+总计；
});
第一个号码：


第二个号码：


添加
减
乘
分

在我创建每个单独的函数之前，有没有一种方法可以编写这些函数
您只需获得一次元素：
const input1 = document.getElementById("Value1");

然后，当您需要它的值时：
const value1 = input1.valueAsNumber;

通常，您可以编写一个函数来避免重复的逻辑。在这种情况下可能不合适，但例如：
function getValueAsNumber(id) {
    return document.getElementById(id).valueAsNumber;
}

然后

以下是一些旁注：

在JavaScript和相关语言中，压倒性的惯例是对不引用构造函数的变量使用小写字母。因此value1
而不是value1
，value1Element
而不是value1Element
，等等
var
不再是JavaScript中的最佳实践。在新代码中，首选let
或const
，因为它们的作用域更有用
当在元素中放置纯文本时，最好使用textContent
而不是innerHTML
，因为浏览器不会尝试将您提供给它的文本解析为HTML
onxyz
-属性样式的事件处理程序不是最佳实践，尤其是因为它们调用的函数必须是全局函数，并且全局命名空间很拥挤。考虑使用现代事件处理（等等）。

仅举一个例子，以下是您的代码，其中应用了上述部分内容，但没有过火：

const gid=id=>document.getElementById（id）；
常量输入1=gid（“值1”）；
常量输入2=gid（“值2”）；
const demo=gid（“demo”）；
gid（“添加”）.addEventListener（“单击”，（）=>{
const total=input1.valueAsNumber+input2.valueAsNumber；
demo.textContent=“总计：”+总计；
});
gid（“子”）.addEventListener（“单击”，（）=>{
const total=input1.valueAsNumber-input2.valueAsNumber；
demo.textContent=“总计：”+总计；
});
gid（“mul”）.addEventListener（“单击”，（）=>{
const total=input1.valueAsNumber*input2.valueAsNumber；
demo.textContent=“总计：”+总计；
});
gid（“div”）.addEventListener（“单击”，（）=>{
const total=input1.valueAsNumber/input2.valueAsNumber；
demo.textContent=