Html - How do I select a value in a list, which stores an object with variables, that uses one of these variables to calculate a sum via user input fields?

TED
July 27, 2023
150 views
2 votes
3 Answers

In a HTML list, I have made 3 options, those should be all linked to an object. This object houses different values, from which I want to calculate a sum in a further function, based on the selection. I have been trying to figure out the easiest way to approach this js problem, but I cannot figure it out. Is there any good way to solve this issue? Thanks in advance!

const lxaib = {
  bem: 647,
  bemcg: 2.112,
  crewcg: 2.05,
  paxcg: 2.993,
  bagcg: 3.627,
  fuelcg: 2.413,
}
// Just an example of working with the first object that should be related to the first list value

function getselectvalue() {
  var selectedvalue = document.getElementById("list").value;
  document.getElementById("test").innerHTML = selectedvalue;
}

function zfm() {
  bem = selectedvalue.bem; // I need to get the variable stored in the object based on the user selection here ... 
  crew = parseFloat(document.getElementById("crew").value);
  pax = parseFloat(document.getElementById("pax").value);
  bag = parseFloat(document.getElementById("baggage").value);
  zfm = bem + crew + pax + bag;
  document.getElementById("zfm").innerHTML = zfm;
}

<select name="airplanes" id="list" onchange="getselectvalue();">
  <option value="lxaib">LXAIB</option>
  <option value="lxaig">LXAIG</option>
  <option value="lxaif">LXAIF</option>
</select>
<br>
<input type="number" name="crew" id="crew" placeholder="crew">
<br>
<input type="number" name=" pax" id="pax" placeholder="pax">
<br>
<input type="number" name="baggage" id="baggage" placeholder="baggage">
<br>
<span id="test"></span>
<br>
<span id="zfm"></span>
<br>
<button onclick="zfm();">Calculate ZFM</button>

Answers

You can wrap all the inputs and the button around a form element and then listen to it’s submit event to extract all the values. Here’s the example:

const lxaib = {
    bem: 647,
    bemcg: 2.112,
    crewcg: 2.05,
    paxcg: 2.993, 
    bagcg: 3.627, 
    fuelcg: 2.413, 
}

const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    var selectedvalue =  document.getElementById("list").value;
    crew = parseFloat(document.getElementById("crew").value);
    pax = parseFloat(document.getElementById("pax").value);
    bag = parseFloat(document.getElementById("baggage").value);
    console.log(selectedvalue, crew, pax, bag);
    zfm = crew + pax + bag; 
    document.getElementById("zfm").innerHTML = zfm; 
});

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Code</title>
</head>
<body>
  <form>
    <select name="airplanes" id="list">
        <option value="lxaib">LXAIB</option>
        <option value="lxaig">LXAIG</option>
        <option value="lxaif">LXAIF</option>
    </select>
    <br>
    <input type="number" name="crew" id="crew" placeholder="crew">
    <br>
    <input type="number" name=" pax" id= "pax" placeholder="pax">
    <br>
    <input type="number" name="baggage" id="baggage" placeholder="baggage">
    <br>
    <span id="zfm"></span>
    <br>
    <button type="submit">Calculate!</button>
  </form>
</body>
</html>

Your data object will need to be in an object with the keys matching that of the select.

Then you get the object via bracket notation.

selected = data[selectedvalue];

Also, the selected variable will need to be declared outside of the function so that it can be access within the other functions.

Also it is best to use event listeners not inline event handlers (like onclick, onchange etc)

const data = {
  "lxaib": {
    bem: 647,
    bemcg: 2.112,
    crewcg: 2.05,
    paxcg: 2.993,
    bagcg: 3.627,
    fuelcg: 2.413,
  },
  "lxaig": {
    bem: 647,
    bemcg: 2.112,
    crewcg: 2.05,
    paxcg: 2.993,
    bagcg: 3.627,
    fuelcg: 2.413,
  },
  "lxaif": {
    bem: 647,
    bemcg: 2.112,
    crewcg: 2.05,
    paxcg: 2.993,
    bagcg: 3.627,
    fuelcg: 2.413,
  }
}

let selected;

function getselectvalue() {
  const selectedvalue = document.getElementById("list").value;
  selected = data[selectedvalue];
  document.getElementById("test").innerHTML = selectedvalue;
}

function zfm() {
  const bem = selected.bem; // I need to get the variable stored in the object based on the user selection here ... 
  const crew = parseFloat(document.getElementById("crew").value);
  const pax = parseFloat(document.getElementById("pax").value);
  const bag = parseFloat(document.getElementById("baggage").value);
  const zfm = bem + crew + pax + bag;
  document.getElementById("zfm").innerHTML = zfm;
}

getselectvalue();

const calc = document.querySelector(".calc");
const planes = document.querySelector("#list");

calc.addEventListener("click",zfm);
planes.addEventListener("change",getselectvalue);

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Code</title>
</head>

<body>
  <select name="airplanes" id="list">
    <option value="lxaib">LXAIB</option>
    <option value="lxaig">LXAIG</option>
    <option value="lxaif">LXAIF</option>
  </select>
  <br>
  <input type="number" name="crew" id="crew" placeholder="crew">
  <br>
  <input type="number" name=" pax" id="pax" placeholder="pax">
  <br>
  <input type="number" name="baggage" id="baggage" placeholder="baggage">
  <br>
  <span id="test"></span>
  <br>
  <span id="zfm"></span>
  <br>
  <button class="calc">Calculate ZFM</button>
</body>

</html>

my advice: take an interest in the online documentation
https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form

const
  myForm = document.querySelector('#my-form')
, airplanes_val = 
  { lxaig: { bem: 100 }
  , lxaif: { bem: 300 }
  , lxaib: 
    { bem    : 647
    , bemcg  : 2.112
    , crewcg : 2.05
    , paxcg  : 2.993
    , bagcg  : 3.627
    , fuelcg : 2.413
    } 
  };
myForm.onsubmit = e =>
  {
  e.preventDefault(); // disable form submiting

  myForm.respons.textContent 
    = airplanes_val[myForm.airplanes.value].bem
    + myForm.crew   .valueAsNumber    // use  .valueAsNumber property
    + myForm.pax    .valueAsNumber
    + myForm.baggage.valueAsNumber
    ;
  }

#my-form output { color: red; }

<form id="my-form">
  <select name="airplanes">   <!-- with a form element no needs to use id-->
    <option value="lxaib">LXAIB</option>
    <option value="lxaig">LXAIG</option>
    <option value="lxaif">LXAIF</option>
  </select>
  <br> <input type="number" name="crew"    placeholder="crew">
  <br> <input type="number" name="pax"     placeholder="pax">
  <br> <input type="number" name="baggage" placeholder="baggage">
  <br> <output              name="respons">...</output>
  <br> <button>Calculate ZFM</button>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do I select a value in a list, which stores an object with variables, that uses one of these variables to calculate a sum via user input fields?

Answers