Question posted in 
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 learner 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>
2
Answers
I changed my code to the following:
It seems to work.
For the sake of easy maintenance/refactoring a solution should be implemented both generic and with higher abstraction.
For the OP’s use case one firstly has to slightly refactor the form-markup including the unification of form-element names with
Packageclass property names.Speaking of the latter, the OP’s
Packageclass implementation introduces getter and setter methods which do not serve any purpose since a) all properties are public anyhow, but b) also did not introduce any protection with the setter implementation. Get/set only makes sense for protected data, hence private data where one is in control of how one allows access to or even alteration of such data. The OP is better off with the most simplePackageabstraction that features just public data.The creation of a package instance should always happen in relation to its form. In order to establish such a relationship, one would make use of a
WeakMapinstance, where the package-configuration form-element serves as key for its package instance, and the latter has to be updated according to any form-element value-changes of its related form-element.One could introduce exactly two functions,
putPackageDatawhich creates and registers the form-related package-instance andpatchPackageDatawhich creates a data-patch from the form’s current element-values and does assign it to the form-related package-instance.One has to make use of e.g. …
WeakMap.prototype.setWeakMap.prototype.getFormDataconstructorFormData.prototype.entriesObject.fromEntriesObject.assignThe next provided example code shows a possible implementation of the just described approach which of cause, due to being generic, patches a package with all current available form-data every time either a single form-element value changes or the form has to handle a submit event.