tick checkbox and insert value in textbox for calculation in javascript

July 23, 2022

i need to count about the number to the tree had been plant and the plant can release how much CO2. So, i need to multiply the number of tree and the function of the planttree. how to multiply the number to plant with the function of plant tree after i click the checkbox of the planttree and insert the total number of plant.

for example, if i insert 2 plant, it must be 2*-(22/12)= -3.67

var person = [];
person["person1"] = 1;
person["person2"] = 2;
person["person3"] = 3;
person["person4"] = 4;
person["person5"] = 5;

var elec = [];
elec["elecuse"] = 0;
elec["elec1"] = 100 * (5455 / 12);
elec["elec2"] = 150 * (5455 / 12);
elec["elec3"] = 200 * (5455 / 12);
elec["elec4"] = 250 * (5455 / 12);
elec["elec5"] = 300 * (5455 / 12);

function getNumberperson() {
  var numberperson = 0;
  var theForm = document.forms["energyform"];
  var selectedPerson = theForm.elements["selectedperson"];
  for (var i = 0; i < selectedPerson.length; i++) {
    if (selectedPerson[i].checked) {
      numberperson = person[selectedPerson[i].value];
    }
  }
  return numberperson;
}

function getElectotal() {
  var electotal = 0;
  var theForm = document.forms["energyform"];
  var selectedElec = theForm.elements["electricity"];
  electotal = elec[selectedElec.value];
  return electotal;
}

function planttree() {
  var planttree = 0;
  var theForm = document.forms["energyform"];
  var plant = theForm.elements["plant"];

  if (plant.checked == true) {
    planttree = -(22 / 12);
  }
  return planttree;
}

function calculateTotal() {
  var HMontotalco = getNumberperson() * getElectotal() + planttree();
  var hmco = document.getElementById('totalHMonthCst').innerHTML = "Per Month = " + HMontotalco.toFixed(2) + " pounds";
}

<body onload='hideTotal()'>
  <div id="all">
    <form action="/action_page.php" id="energyform" onsubmit="return false;">
      <div>
        <div class="cont_order">
          <fieldset>
            <legend>Carbon Footprint Calculator</legend>
            <label>Number of Person Live in Household</label><br/>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person1" onclick="calculateTotal()">1&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person2" onclick="calculateTotal()">2&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person3" onclick="calculateTotal()">3&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person4" onclick="calculateTotal()">4&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person5" onclick="calculateTotal()">5&nbsp</label>
            <br/>
            <label>&nbspElectricity&nbsp&nbsp&nbsp&nbsp</label>
            <select id="electricity" name='electricity' onchange="calculateTotal();allvalidate()">
              <option value="elecuse">0kWh</option>
              <option value="elec1">100kWh</option>
              <option value="elec2">150kWh</option>
              <option value="elec3">200kWh</option>
              <option value="elec4">250kWh</option>
              <option value="elec5">300kWh</option>
            </select>
            <br/>
            <label for='plant' class="tree">Plant</label></hr>
            <input type="checkbox" id="plant" name='plant' onchange="calculateTotal();allvalidate()">
            <input type="text" id="textbox" name="textbox" value="Enter total plant" />
            <br/>
            <hr><label>Total CO2 produced per household</label></hr>
            <br/>
            <div id="totalHMonthCst">Per month = 0</div>
          </fieldset>
        </div>
      </div>
    </form>
  </div>
</body>

>Solution :

I used .getElementById() method instead of using theForm.elements[].
You just have to get the value of input with id textbox. And multiply it. If you want to change the value as per the user input you can attach eventlistener oninput on that textbox.

var person = [];
person["person1"] = 1;
person["person2"] = 2;
person["person3"] = 3;
person["person4"] = 4;
person["person5"] = 5;

var elec = [];
elec["elecuse"] = 0;
elec["elec1"] = 100 * (5455 / 12);
elec["elec2"] = 150 * (5455 / 12);
elec["elec3"] = 200 * (5455 / 12);
elec["elec4"] = 250 * (5455 / 12);
elec["elec5"] = 300 * (5455 / 12);

function getNumberperson() {
  var numberperson = 0;
  var theForm = document.forms["energyform"];
  var selectedPerson = theForm.elements["selectedperson"];
  for (var i = 0; i < selectedPerson.length; i++) {
    if (selectedPerson[i].checked) {
      numberperson = person[selectedPerson[i].value];
    }
  }
  return numberperson;
}

function getElectotal() {
  var electotal = 0;
  var theForm = document.forms["energyform"];
  var selectedElec = theForm.elements["electricity"];
  electotal = elec[selectedElec.value];
  return electotal;
}

function planttree() {
  var planttree = 0;
  var theForm = document.forms["energyform"];
  var plant = theForm.elements["plant"];
  var txtBoxVal = document.getElementById("textbox").value;

  if (plant.checked === true) {
    planttree = txtBoxVal*(-(22 / 12));
  }
  return planttree;
}

function calculateTotal() {
  var HMontotalco = getNumberperson() * getElectotal() + planttree();
  var hmco = document.getElementById('totalHMonthCst').innerHTML = "Per Month = " + HMontotalco.toFixed(2) + " pounds";
}

<body onload='hideTotal()'>
  <div id="all">
    <form action="/action_page.php" id="energyform" onsubmit="return false;">
      <div>
        <div class="cont_order">
          <fieldset>
            <legend>Carbon Footprint Calculator</legend>
            <label>Number of Person Live in Household</label><br/>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person1" onclick="calculateTotal()">1&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person2" onclick="calculateTotal()">2&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person3" onclick="calculateTotal()">3&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person4" onclick="calculateTotal()">4&nbsp</label>
            <label class='radiolabel'><input type="radio"  name="selectedperson" value="person5" onclick="calculateTotal()">5&nbsp</label>
            <br/>
            <label>&nbspElectricity&nbsp&nbsp&nbsp&nbsp</label>
            <select id="electricity" name='electricity' onchange="calculateTotal();allvalidate()">
              <option value="elecuse">0kWh</option>
              <option value="elec1">100kWh</option>
              <option value="elec2">150kWh</option>
              <option value="elec3">200kWh</option>
              <option value="elec4">250kWh</option>
              <option value="elec5">300kWh</option>
            </select>
            <br/>
            <label for='plant' class="tree">Plant</label></hr>
            <input type="checkbox" id="plant" name='plant' onchange="calculateTotal();allvalidate()">
            <input type="text" oninput="calculateTotal();" id="textbox" name="textbox" placeholder="Enter total plant" />
            <br/>
            <hr><label>Total CO2 produced per household</label></hr>
            <br/>
            <div id="totalHMonthCst">Per month = 0</div>
          </fieldset>
        </div>
      </div>
    </form>
  </div>
</body>