我使用这个Javascript代码，它完成了任务，但我觉得它可以更短

我使用这个函数根据4个选择输入和1个数字输入进行计算，我没有Js方面的经验，我在W3学校做了一些研究，然后我使用下面的函数。 Js函数的工作方式完全符合我的要求，但我觉得它不是完美的语法，它可以更短，更干净，任何建议都将不胜感激

函数计算（）{
var x=parseFloat（document.getElementById（“Lang_from”）.value）；
var y=parseFloat（document.getElementById（“Lang_to”）.value）；
var q=parseFloat（document.getElementById（“数量”）.value）；
var s=parseFloat（document.getElementById（“subject”）.value）；
var f=parseFloat（document.getElementById（“文件类型”）.value）；
var xx=document.getElementById（'Lang_from'）。选择选项[0]。文本；
var yy=document.getElementById（'Lang_to'）。选择选项[0]。文本；
var ff=document.getElementById（“文件类型”）。选择选项[0]。文本；
var ss=document.getElementById（'subject'）。选择选项[0]。文本；
document.getElementById（“总价”）.innerHTML=（x+y）*q+（s+f）；
}

从…起
英语
德国的
到
德国的
英语
文件类型
文本
微软word
PDF（+5美元）
手写
主题
一般的
技术/信息技术
医学的
按
字数
算计

也许您可以删除重复的选择器，如：

document.getElementById("Lang_from")

您可以创建一个包含选择器的变量

var lang_form = document.getElementById("Lang_from");

---

一种可能是定义一个本地助手函数，该函数通过

id

从字段元素返回浮点数，如下所示：

function floatFrom(id) {
   return Number.parseFloat(document.getElementById(id).value); 
}

使用

floatFrom（）

helper，您可以将

calculate（）

函数缩短为：

function calculate() {

    function floatFrom(id) {
       return Number.parseFloat(document.getElementById(id).value); 
    }

    document.getElementById("total_price").innerHTML = 
        (floatFrom("Lang_from") + floatFrom("Lang_to")) * floatFrom("quantity") + 
        (floatFrom("subject") + floatFrom("file_type"));
}

还请注意，

xx

、

yy

、

ff

和

ss

似乎是多余的，也可以从

calculate（）

中删除以简化函数

有关工作示例，请参见下面的代码段：

函数计算（）{
函数floatFrom（id）{
返回Number.parseFloat（document.getElementById（id）.value）；
}
document.getElementById（“总价”）.innerHTML=
（floatFrom（“Lang_-from”）+floatFrom（“Lang_-to”）*floatFrom（“数量”）+
（floatFrom（“主体”）+floatFrom（“文件类型”）；
}

从…起
英语
德国的
到
德国的
英语
文件类型
文本
微软word
PDF（+5美元）
手写
主题
一般的
技术/信息技术
医学的
按
字数
算计

在我回答之前，祝贺您开始JavaScript之旅。这是一条有趣（尽管崎岖不平）的道路

根据我的经验，在JavaScript中至少有两种方法可以完成某些事情。最后，问题不在于你是如何写的，而在于你过了一段时间后是如何理解的。也就是说，您可以遵循一些建议

---

对于您的代码，我建议您不要使用太多的ID，因为它会使事情快速复杂化。

随着您在JS之旅中了解的更多，您将遇到更多类似这样的问题，这将导致您选择各种不同风格的框架和库。（因此，您现在已经尝到了普通“vanilla js”的味道）每一个都可能有其优缺点、语法方面、整体设计等等。现在作为一个例子，您可能希望消除冗长的单个变量定义。您可能会遇到这样的情况（尽管有很多方法可以解决）：

然后，您可能会因为冗余的

get

调用而头疼。一般来说，你会一直处理这个问题。我的建议是保持代码的原样，并可能改进变量命名，使其具有自描述性。请记住，目标是生成一个可读性和可维护性都很强的代码，不要仅仅为了减少代码行而过度抽象代码

但请稍候

实际上，您不需要

get

方法

与：

---

关于长度，您的代码没有问题。JavaScript是一种非常长的语言，特别是如果您使用DOM方法，如

getElementById

如果我是你，我会这样做

“严格使用”；
console.clear（）；
//将函数封装在匿名函数中，这样全局命名空间就不会受到污染，也不会与其他JS代码冲突
;（功能（）{
//为这些值创建一个访问器函数
函数get_值（id，number）{
如果（数字）{
返回parseFloat（document.getElementById（id）.value）；
}否则{
return document.getElementById（id）.value；
}
}
//生成一个输出函数
函数输出（值）{
document.getElementById（“总价”）.innerHTML=parseInt（Math.round（value*100））/100
}
函数计算（）{
var x=获取值（“Lang_from”，true）；
var y=获取值（“Lang_to”，true）；
var q=获取_值（“数量”，真）；
var s=获取价值（“主体”，真）；
var f=获取值（“文件类型”，true）；
输出（（x+y）*q+（s+f））；
}
函数侦听（id、事件、func）{
document.getElementById（id）.addEventListener（事件，函数）；
}
//不要在HTML元素上使用`onclick`属性处理程序，而是使用
const fields = ['Lang_from', 'Lang_to', 'quantity', 'subject', 'file_type'];
var values = [];

function get(field) {
  var i = fields.indexOf(field);
  return values[i];
}

function getValues() {
  values = fields.map(field => 
    { 
      return parseFloat(document.getElementById(field).value || 0) 
    });
}

function calculate(field) {
  getValues(); // gets all the values from defined fields
  document.getElementById("total_price").innerHTML = 
    (get('Lang_from') + get('Lang_to')) * get('quantity') + (get('subject') + get('file_type'));
}

function calculate(field) {
  getValues(); // gets all the values from defined fields
  var [x, y, q, s, f] = values;
  document.getElementById("total_price").innerHTML = (x + y) * q + (s + f);
}