The radio buttons and checkbox do not show the alert message after clicking, Can you look if I made a mistake?

Question

<!doctype html>

<html>

<head>
<title> Functions </title>
<script>

This function serves the purpose of display 2 or 3 pollutant ppm levels with in a single alert message (pop-up on the html page)

function pollutant_level_multiple()
{
if(!document.getElementById("co").checked && 
document.getElementById("no2").checked && 
document.getElementById("voc").checked == true)
{alert("CO=394 ppm");
}
else if(document.getElementById("co").checked && 
!document.getElementById("no2").checked && 
document.getElementById("voc").checked == true)
{alert("CO=394 ppm");
}
else if(document.getElementById("co").checked && 
document.getElementById("no2").checked && 
!document.getElementById("voc").checked == true)
{alert("CO=394 ppm");
}
else if(document.getElementById("co").checked && 
document.getElementById("no2").checked && 
document.getElementById("voc").checked == true)
{alert("CO=394 ppm");
}
}

This function display only one pollutant ppm level at once.

function pollutant_level_individual()
{
if(document.getElementById("co").checked == true)
{alert("CO=394 ppm");
}
else if(document.getElementById("no2").checked == true)
{alert("CO=394 ppm");
}
else if(document.getElementById("voc").checked == true)
{alert("CO=394 ppm");
}
}
</script>
</head>

<body>
<form>

Which of the following pollutant level would you like to know?
<ol>

I used radio button to give the user freedom to view the pollutant levels individually or multiple at once. 'onclick' is the one which executes the appropriate function in the <script> tag.

Would you like to view ppm levels individually or multiple values at once? 
&nbsp Individually: <input id = "radio1" type = "radio" name = "indimul" 
onclick="pollutant_level_individual();"/> &nbsp Multiple at once: <input id 
= "radio2" type = "radio" name = "indimul" 
onclick="pollutant_level_multiple();" /> 
<li> Carbon-monoxide: <input id = "co" type = "checkbox" name = "CO 
indicator" onclick = "pollutant_level_multiple();"/>  </li>
<li> Nitrogen-dioxide: <input id = "no2" type = "checkbox" name = "NO2 
indicator" onclick="pollutant_level_multiple();"/> </li>
<li> Volatile Organic Compounds: <input id = "voc" type = "checkbox" name = 
"VOC indicator" onclick="pollutant_level_multiple();"/> </li>
</ol>

</form>

</html>

Answer 1

I got your question actually, there are multiple areas that the above code needs to be improved.

If condition- Use of else if in multiple cases should have been different
Individual/Multiple is the direction of the code, the driving function is missing I added

please find the working snippet below and let me know if further help is needed.

  var ClickFun; function setTheAlertFlow(flow){ if(flow=="mutliple"){ ClickFun=pollutant_level_multiple; }else{ ClickFun =pollutant_level_individual; }; ClickFun(); } function pollutant_level_multiple() { var ppmLevels = ''; if(document.getElementById("co").checked ){ ppmLevels += "CO=394 ppm" + " " }; if(document.getElementById("no2").checked ){ ppmLevels += "NO2=394 ppm" + " " } if(document.getElementById("voc").checked ){ ppmLevels += "VOC=394 ppm" } if(ppmLevels){ alert(ppmLevels) }else{ alert("PPM No PPM checkboxes selected") } } function pollutant_level_individual() { if (document.getElementById("co").checked == true) { alert("CO=394 ppm"); } if (document.getElementById("no2").checked == true) { alert("NO=394 ppm"); } if (document.getElementById("voc").checked == true) { alert("VOC=394 ppm"); } }

 <!doctype html> <html> <head> <title> Functions </title> <script> </script> </head> <body> <form> Which of the following pollutant level would you like to know? <ol> Would you like to view ppm levels individually or multiple values at once? &nbsp Individually: <input id="radio1"radioG type="radio" name="indimul" value="individual" onclick="setTheAlertFlow(this.value);" /> &nbsp Multiple at once: <input id="radio2" type="radio" name="indimul" value="mutliple" onclick="setTheAlertFlow(this.value);" /> <li> Carbon-monoxide: <input id="co" type="checkbox" name="CO indicator" onclick="ClickFun();" /> </li> <li> Nitrogen-dioxide: <input id="no2" type="checkbox" name="NO2 indicator" onclick="ClickFun();" /> </li> <li> Volatile Organic Compounds: <input id="voc" type="checkbox" name="VOC indicator" onclick="ClickFun();" /> </li> </ol> </form> </html>

Answer 2

It is a little unclear from your question, but I think you are looking for something like this:

 var polutantsPPM = { CO: 394, NO2: 224, VOC: 122 }; function getReportString(polutantId, polutantsPPM){ return polutantId + " = " + polutantsPPM[polutantId] + "ppm"; } function pollutant_level_individual() { if(document.getElementById("co").checked) { alert(getReportString("CO", polutantsPPM)); } if(document.getElementById("no2").checked) { alert(getReportString("NO2", polutantsPPM)); } if(document.getElementById("voc").checked) { alert(getReportString("VOC", polutantsPPM)); } } function pollutant_level_multiple() { var msg = []; if(document.getElementById("co").checked) { msg.push(getReportString("CO", polutantsPPM)); } if(document.getElementById("no2").checked) { msg.push(getReportString("NO2", polutantsPPM)); } if(document.getElementById("voc").checked) { msg.push(getReportString("VOC", polutantsPPM)); } alert(msg.join("\\n")); }

 <p> Which of the following pollutant level would you like to know? </p> <ol> <li>Carbon-monoxide: <input id="co" type="checkbox" name="CO indicator"/></li> <li>Nitrogen-dioxide: <input id="no2" type="checkbox" name="NO2 indicator"/></li> <li>Volatile Organic Compounds: <input id="voc" type="checkbox" name="VOC indicator"/></li> </ol> <p> Would you like to view ppm levels individually or multiple values at once? &nbsp; Individually: <input id="radio1" type="radio" name="indimul" onclick="pollutant_level_individual();"/> &nbsp; Multiple at once: <input id="radio2" type="radio" name="indimul" onclick="pollutant_level_multiple();" /> </p>

The radio buttons and checkbox do not show the alert message after clicking, Can you look if I made a mistake?

Question

2 answers

solution1
0 ACCPTED 2018-03-31 18:32:32

solution2
0 2018-03-31 18:38:01

The radio buttons and checkbox do not show the alert message after clicking, Can you look if I made a mistake?

Question

2 answers

solution1 0 ACCPTED 2018-03-31 18:32:32

solution2 0 2018-03-31 18:38:01

solution1
0 ACCPTED 2018-03-31 18:32:32

solution2
0 2018-03-31 18:38:01