show the output when the select all checkbox is click-CodePudding

if i click the select all checkbox, it does not show any things, and i need to click other button and the output just show. How to correct it so that the select all checkbox can show the output with direct click it and does not need to continue by clicking other button then the output just show. Just like other when i click the person and follow by electric the output will show at the bottom of the html.

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*454.58;
elec["elec2"] = 200*454.58;
elec["elec3"] = 300*454.58;
elec["elec4"] = 400*454.58;
elec["elec5"] = 500*454.58;
elec["elec6"] = 600*454.58;
elec["elec7"] = 700*454.58;
elec["elec8"] = 800*454.58;
elec["elec9"] = 900*454.58;

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 recyclealu()
{
    var recyclealu=0;
    var theForm = document.forms["energyform"];
    var yesalu = theForm.elements["yesalu"];

    if(yesalu.checked==true)
    {
        recyclealu=-89.38;
    }
    return recyclealu;
}

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

    if(yesplas.checked==true)
    {
        recycleplas=-35.56;
    }
    return recycleplas;
}
 
function checkAllRecycles() {
    const recycleBoxes = document.querySelectorAll('input[type="checkbox"]');

  if (recycleBoxes) {
    recycleBoxes.forEach((recycleBox) => {
      if (!recycleBox.checked) {
        recycleBox.checked = 'checked';
      }
    })
  }
}

function calculateTotal()
{
    var totalco = getNumberperson()*getElectotal()   recyclealu()   recycleplas();
    
    //display the result

    document.getElementById('totalConsumption').innerHTML =  totalco;

}

//add a function to hide the result on page loading at the start
function hideTotal()
{
    document.getElementById('totalConsumption').innerHTML = "0";
}

<body onl oad='hideTotal()'>
    <div id="all">
        <form action="/action_page.php" id="energyform" onsubmit="return false;">
        <div>
            <div >
               <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/><br/>
                <label><i ></i>Energy Consumption Per Month</label>
<br/>
                <label>&nbspElectricity&nbsp&nbsp&nbsp&nbsp</label>
                <select id="electricity" name='electricity' onchange="calculateTotal()">
                <option value="elecuse">0</option>
                <option value="elec1">100</option>
                <option value="elec2">200</option>
                <option value="elec3">300</option>
                <option value="elec4">400</option>
                <option value="elec5">500</option>
                <option value="elec6">600</option>
                <option value="elec7">700</option>
                <option value="elec8">800</option>
                <option value="elec9">900</option>
                </select>
<br/><br/>
                <label><i ></i>Recycle </label>
<br/>
                <label for='yesalu' >&nbspAluminium and Steel&nbsp&nbsp</label>
                <input type="checkbox" id="yesalu" name='yesalu' onclick="calculateTotal()" />
<br/>
                <label for='yesplas' >&nbspPlastic&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label>
                <input type="checkbox" id="yesplas" name='yesplas' onclick="calculateTotal()" />
<br/>
                <button type="button" onclick="checkAllRecycles()">Select All</button>   
<br/>
                <p>Total CO2 produced per year per household:</p>
                <div id="totalConsumption">0</div>
                </fieldset>
            </div>
            
            <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
            <input type='reset' id='reset' value='Reset' onclick="hideTotal()" />
        </div>  
       </form>
                    </div>

</body>

CodePudding user response：

Just call your calculateTotal() function inside your checkAllRecycles() scope.

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*454.58;
elec["elec2"] = 200*454.58;
elec["elec3"] = 300*454.58;
elec["elec4"] = 400*454.58;
elec["elec5"] = 500*454.58;
elec["elec6"] = 600*454.58;
elec["elec7"] = 700*454.58;
elec["elec8"] = 800*454.58;
elec["elec9"] = 900*454.58;

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 recyclealu()
{
    var recyclealu=0;
    var theForm = document.forms["energyform"];
    var yesalu = theForm.elements["yesalu"];

    if(yesalu.checked==true)
    {
        recyclealu=-89.38;
    }
    return recyclealu;
}

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

    if(yesplas.checked==true)
    {
        recycleplas=-35.56;
    }
    return recycleplas;
}
 
function checkAllRecycles() {
    const recycleBoxes = document.querySelectorAll('input[type="checkbox"]');

  if (recycleBoxes) {
    recycleBoxes.forEach((recycleBox) => {
      if (!recycleBox.checked) {
        recycleBox.checked = 'checked';
      }
    })
  }
  calculateTotal();
}

function calculateTotal()
{
    var totalco = getNumberperson()*getElectotal()   recyclealu()   recycleplas();
    
    //display the result

    document.getElementById('totalConsumption').innerHTML =  totalco;

}

//add a function to hide the result on page loading at the start
function hideTotal()
{
    document.getElementById('totalConsumption').innerHTML = "0";
}

<body onl oad='hideTotal()'>
    <div id="all">
        <form action="/action_page.php" id="energyform" onsubmit="return false;">
        <div>
            <div >
               <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/><br/>
                <label><i ></i>Energy Consumption Per Month</label>
<br/>
                <label>&nbspElectricity&nbsp&nbsp&nbsp&nbsp</label>
                <select id="electricity" name='electricity' onchange="calculateTotal()">
                <option value="elecuse">0</option>
                <option value="elec1">100</option>
                <option value="elec2">200</option>
                <option value="elec3">300</option>
                <option value="elec4">400</option>
                <option value="elec5">500</option>
                <option value="elec6">600</option>
                <option value="elec7">700</option>
                <option value="elec8">800</option>
                <option value="elec9">900</option>
                </select>
<br/><br/>
                <label><i ></i>Recycle </label>
<br/>
                <label for='yesalu' >&nbspAluminium and Steel&nbsp&nbsp</label>
                <input type="checkbox" id="yesalu" name='yesalu' onclick="calculateTotal()" />
<br/>
                <label for='yesplas' >&nbspPlastic&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label>
                <input type="checkbox" id="yesplas" name='yesplas' onclick="calculateTotal()" />
<br/>
                <button type="button" onclick="checkAllRecycles()">Select All</button>   
<br/>
                <p>Total CO2 produced per year per household:</p>
                <div id="totalConsumption">0</div>
                </fieldset>
            </div>
            
            <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
            <input type='reset' id='reset' value='Reset' onclick="hideTotal()" />
        </div>  
       </form>
                    </div>

</body>