如何将不同输入字段的值保存到不同的变量中并在Javascript中更新它们？

Question

我有以下函数，以便更新四个不同输入字段的值：

更新 我的包类定义如下：

class Package{
     
     constructor(packageID, type, weight,height,description){
     this.packageID = packageID;
     this.type = type;
     this.weight = weight;
     this.height = height;
     this.description= description;
     
     }
     
     getPackageId(){
         
         return this.packageId;
     }
     
     getType(){
         return this.type;
     }
     
     getWeight(){
         return this.weight;
     }
     getHeight(){
         return this.height;
     }
     getDescription(){
         return this.description;
     }
     
     /*setPackageId(packageId){
         this.packageId= packageId
         return packageId;
     }*/
     
     setType(type){
         this.type = type;
         return type;
     }
    
     
     setWeight(weight){
         
         this.weight = weight;
         return this.weight;
     }
     setHeight(height){
         this.height = height;
         return this.height;
     }
     setDescription(description){
         this.description = description;
         return this.description;
     }
     
    
}

let inputfieldtype = document.getElementById('selectPackageType');
let inputfieldweight = document.getElementById('floatWeight');
let inputfieldheight = document.getElementById('floatHeight');
let inputfielddescription = document.getElementById('description');

function updateValues(){
    var value = this.value;
    
      if (value == null) {
        console.log('value of packege is null');
      } else 
        
        if (value != "" && (inputfieldtype == 'selectPackageType')){
                  type = value; 
                          
              } else if (value != "" && (inputfieldweight == 'floatWeight')){
                  weight = value;
                  
              } else if (value != "" && (inputfieldheight == 'floatHeight')){
                  height = value;
                  
              } else if (value != "" && (inputfielddescription == 'description')){   
                  description = value;
                  
              }
         
     }  
 
        inputfieldweight.addEventListener('change', updateValues );
        inputfieldheight.addEventListener('change', updateValues);
        inputfielddescription.addEventListener('change', updateValues);
        inputfieldtype.addEventListener('change', updateValues);

到目前为止我了解到的是，我的 if 语句的条件没有用，因为在所有四种情况下，我想要与之比较的字符串都是 true。 我的目标如下：我想检查哪个输入字段已被单击，并且我想将该字段的值保存到变量中。

然后我想创建我的类“Package”的一个新实例，并用这个值填充它们的属性。

//Create instance of package
const package = new Package();
//shoot all the values into one package
function submit(){  
  if (typeof package != "undefined") {
      package.packageID = randomID;
      package.type = type;
      package.weight = weight; 
      package.height = height;
      package.description = description;   
      console.log(package);
  }else {
        console.log(package);
  }
}

这是 HTML 代码

<form autocomplete="off">
<div class="custom-select">
  <label for="selectPackageType">Type</label>
  <select id="selectPackageType" name ="type">
  
    <option value="1">letter</option>
    <option value="2" >package</option> 
  </select>
  </div>
</form>

<div class="fancy-input">
<label for="floatWeight">Weight</label>
<input id="floatWeight" name="floatWeight" maxlength ="8">
</div>

<div class="fancy-input">
<label for="floatHeight">Height</label>
<input id="floatHeight" name="floatHeight" maxlength ="8">
</div>

<div class="fancy-input">
<label for="description">Description</label>
<input id="description" name="description">
</div>

<button onclick="submit()">Submit</button>

Answer 1

我将代码更改为以下内容：

/**
 * this class describes the package that should be send or collect
 */

 
 class Package{
     
     constructor(packageID, type, weight,height,description){
     this.packageID = packageID;
     this.type = type;
     this.weight = weight;
     this.height = height;
     this.description= description;
     
     }
     
     getPackageId(){
         
         return this.packageId;
     }
     
     getType(){
         return this.type;
     }
     
     getWeight(){
         return this.weight;
     }
     getHeight(){
         return this.height;
     }
     getDescription(){
         return this.description;
     }
     
     /*setPackageId(packageId){
         this.packageId= packageId
         return packageId;
     }*/
     
     setType(type){
         this.type = type;
         return type;
     }
    
     
     setWeight(weight){
         
         this.weight = weight;
         return this.weight;
     }
     setHeight(height){
         this.height = height;
         return this.height;
     }
     setDescription(description){
         this.description = description;
         return this.description;
     }
     
    
}

//Generate PackageId 
const generateID = () => Math.random().toString(36).slice(2);
//Global Variables
const randomID = generateID();

const formgetInputfields = document.getElementById("getInputfields");
const inputfieldtype = document.getElementById('selectPackageType');
const inputfieldweight = document.getElementById('floatWeight');
const inputfieldheight = document.getElementById('floatHeight');
const inputfielddescription = document.getElementById('description');

//Create instance of package
const package = new Package();
//shoot all the values into one package
function submit(){  
const type = inputfieldtype.value;
const weight = inputfieldweight.value;
const height = inputfieldheight.value;
const description = inputfielddescription.value;
    console.log(formgetInputfields);
    
  if (typeof package != "undefined") {
      package.packageID = randomID;
      package.type = type;
      package.weight = weight; 
      package.height = height;
      package.description = description;   
      console.log(package);
  }else {
        console.log(package);
  }
}
formgetInputfields.addEventListener("change", submit);

看起来有效。