I have the following function, in order to update values from four different input fields:
UPDATED
My Package Class is defined as followed:
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);
What I've learned so far is, that the condition of my if statement is not useful, because in all four cases, the string I want to compare it with, is true. My goal is the following: I want to check, which input field has been clicked and I want to save the value of this field into a variable.
Then I want to create a new instance of my Class "Package" and fill their attributes with this values.
//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);
}
}
Here is the HTML Code
<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>
