Change Variable Values On Checkbox

Question

I need to be able to change the values of variables on checkbox check.

What I want to to make it so that when Area 1 radio button is checked the legend spits out the following values:

    var populationScore1 = 50000;
    var populationScore2 = 100000; 
    var populationScore3 = 250000;
    var populationScore4 = 500000;
    var populationScore5 = 10000000;

And when Area 2 radio button is checked the legend spits out the following values:

    var populationScore1 = 100000;
    var populationScore2 = 200000; 
    var populationScore3 = 500000;
    var populationScore4 = 1000000;
    var populationScore5 = 20000000;

I have created a simple if then statement below:

The code in question is below:

    if(area1.checked) {     
    var populationScore1 = 50000;
    var populationScore2 = 100000; 
    var populationScore3 = 250000;
    var populationScore4 = 500000;
    var populationScore5 = 10000000;
    } else if (area2.checked) {

    var populationScore1 = 100000;
    var populationScore2 = 200000; 
    var populationScore3 = 500000;
    var populationScore4 = 1000000;
    var populationScore5 = 20000000;    
    }

And it does work on page load but only if I manually add checked status to the radio button

The full code is below:

    var map;
	//COLORS
	// Population Map Color	
	var populationColor = ""; // polygon fill color
	var populationColor1 = '#edf8fb';
	var populationColor2 = '#b2e2e2';
	var populationColor3 = '#66c2a4';
	var populationColor4 = '#2ca25f';
	var populationColor5 = '#006d2c';
	// LEGEND SCORES
	// Population Map Score
		if(area1.checked) {		
		var populationScore1 = 50000;
		var populationScore2 = 100000; 
		var populationScore3 = 250000;
		var populationScore4 = 500000;
		var populationScore5 = 10000000;
		} else if (area2.checked) {

		var populationScore1 = 100000;
		var populationScore2 = 200000; 
		var populationScore3 = 500000;
		var populationScore4 = 1000000;
		var populationScore5 = 20000000;	
		}		
	// LEGEND	
	// Population Legend
	document.getElementById('populationLegend').innerHTML =
	"<div id='populationLegend'>" +
	"<div class='legend-title'>Population</div>" +
	"<div class='legend-scale'>" +
		"<ul class='legend-labels'>" +
			"<li><span style='background:" + populationColor1 + "'></span>0 - " + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
			"<li><span style='background:" + populationColor2 + "'></span>" + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
			"<li><span style='background:" + populationColor3 + "'></span>" + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
			"<li><span style='background:" + populationColor4 + "'></span>" + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
			"<li><span style='background:" + populationColor5 + "'></span>" + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore5.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
		"</ul>" +
	"</div>" +
	"</div>";

function show1(){
  document.getElementById('my-legend').style.display ='none';	
}
function show2(){
  document.getElementById('my-legend').style.display = 'block';
  document.getElementById('populationLegend').style.display = 'block';
}

  #my-legend {
	position: absolute;
	bottom: 5%;
	left: 2%;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	font-family: 'Roboto','sans-serif';
	line-height: 30px;
	padding-left: 10px;
	border-radius: 3px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	display: none;
	}
  #my-legend .legend-title {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 90%;
    }
  #my-legend .legend-scale ul {
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    float: left;
    list-style: none;
    }
  #my-legend .legend-scale ul li {
    font-size: 70%;
    list-style: none;
    margin-left: 0;
    line-height: 16px;
    margin-bottom: 2px;
    }
  #my-legend ul.legend-labels li span {
    display: block;
    float: left;
    height: 17px;
    width: 20px;
    margin-right: 5px;
    margin-left: 0;
    }
  #my-legend ul.legend-labels li:first-child  span {
	border-radius: 4px 4px 0 0;
    }
  #my-legend ul.legend-labels li:last-child  span {
	border-radius: 0 0 4px 4px;	  
    }		
  #my-legend a {
    color: #777;
    }
  input #a {
	border: 1px black solid;
	border-radius: 4px 0 0 4px;
	}

	  <div id="maptype">	
<div id="content">

<form class="form">
	<div class="switch-field">
		<input type="radio" id="area1" name="switch-two" checked/>
		<label for="area1">Area 1</label>
		<input type="radio" id="area2" name="switch-two"/>
		<label for="area2">Area 2</label>
	</div>
</form>

<label class="container" style="margin-top: 12px;" onclick="show1();">No Legend
  <input type="radio" checked="checked" name="radio" id="area">
  <span class="checkmark"></span>
</label>
<label class="container" onclick="show2();">Legend
  <input type="radio" name="radio" id="Population">
  <span class="checkmark"></span>
</label>
</div>
</div>
		<div id="my-legend">
		<div id="populationLegend">
		</div>		
		</div>

I am assuming I need to add an event listener somewhere, but I'm not sure

Sergio Cabral · Accepted Answer · 2019-04-22 03:07:16Z

Using the code you wrote and modifying as little as possible, the solution is 1) create the update() function and 2) set the onclick="update()" attribute of the radios.

<style>
    #my-legend {
        position: absolute;
        bottom: 5%;
        left: 2%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
        border-radius: 3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        display: none;
    }
    #my-legend .legend-title {
        text-align: left;
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 90%;
    }
    #my-legend .legend-scale ul {
        margin: 0;
        margin-bottom: 10px;
        padding: 0;
        float: left;
        list-style: none;
    }
    #my-legend .legend-scale ul li {
        font-size: 70%;
        list-style: none;
        margin-left: 0;
        line-height: 16px;
        margin-bottom: 2px;
    }
    #my-legend ul.legend-labels li span {
        display: block;
        float: left;
        height: 17px;
        width: 20px;
        margin-right: 5px;
        margin-left: 0;
    }
    #my-legend ul.legend-labels li:first-child  span {
        border-radius: 4px 4px 0 0;
    }
    #my-legend ul.legend-labels li:last-child  span {
        border-radius: 0 0 4px 4px;
    }       
    #my-legend a {
        color: #777;
    }
    input #a {
        border: 1px black solid;
        border-radius: 4px 0 0 4px;
    }
</style>
<div id="maptype">
    <div id="content">
        <form class="form">
            <div class="switch-field">
                <input type="radio" id="area1" name="switch-two" onclick="update();" checked/>
                <label for="area1">Area 1</label>
                <input type="radio" id="area2" name="switch-two" onclick="update();" />
                <label for="area2">Area 2</label>
            </div>
        </form>
        <label class="container" style="margin-top: 12px;" onclick="show1();">No Legend
            <input type="radio" checked="checked" name="radio" id="area">
                <span class="checkmark"></span>
            </label>
            <label class="container" onclick="show2();">Legend
                <input type="radio" name="radio" id="Population">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
        <div id="my-legend">
            <div id="populationLegend"></div>
        </div>
    </div>
</div>
<script>
    var map;

    //COLORS
    // Population Map Color
    var populationColor = ""; // polygon fill color
    var populationColor1 = '#edf8fb';
    var populationColor2 = '#b2e2e2';
    var populationColor3 = '#66c2a4';
    var populationColor4 = '#2ca25f';
    var populationColor5 = '#006d2c';

    function update() {
        // LEGEND SCORES
        // Population Map Score
        if (area1.checked) {
            var populationScore1 = 50000;
            var populationScore2 = 100000;
            var populationScore3 = 250000;
            var populationScore4 = 500000;
            var populationScore5 = 10000000;
        } else if (area2.checked) {
            var populationScore1 = 100000;
            var populationScore2 = 200000;
            var populationScore3 = 500000;
            var populationScore4 = 1000000;
            var populationScore5 = 20000000;
        }

        // LEGEND   
        // Population Legend
        document.getElementById('populationLegend').innerHTML =
            "<div id='populationLegend'>" +
            "<div class='legend-title'>Population</div>" +
            "<div class='legend-scale'>" +
            "<ul class='legend-labels'>" +
            "<li><span style='background:" + populationColor1 + "'></span>0 - " + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "<li><span style='background:" + populationColor2 + "'></span>" + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "<li><span style='background:" + populationColor3 + "'></span>" + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "<li><span style='background:" + populationColor4 + "'></span>" + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "<li><span style='background:" + populationColor5 + "'></span>" + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore5.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "</ul>" +
            "</div>" +
            "</div>";
    }
    update();

    function show1() {
        document.getElementById('my-legend').style.display = 'none';
    }

    function show2() {
        document.getElementById('my-legend').style.display = 'block';
        document.getElementById('populationLegend').style.display = 'block';
    }
</script>

Aydin4ik · Accepted Answer · 2019-04-22 03:59:50Z

Here is a quick and dirty way of achieving what you are after - without altering your code by much. What I did is to enclose the Legend creation code in a function and re-run the function each time the radio buttons are clicked. The function assigns the population sizes each time it is run, depending on the parameter given.

var map;
	//COLORS
	// Population Map Color	
	var populationColor = ""; // polygon fill color
	var populationColor1 = '#edf8fb';
	var populationColor2 = '#b2e2e2';
	var populationColor3 = '#66c2a4';
	var populationColor4 = '#2ca25f';
	var populationColor5 = '#006d2c';
	// LEGEND	
	// Population Legend
  var populateLegend = function(n) {
    if( n == 1) { 
		var populationScore1 = 50000;
		var populationScore2 = 100000; 
		var populationScore3 = 250000;
		var populationScore4 = 500000;
		var populationScore5 = 10000000;
    }else if( n == 2 ) {
		var populationScore1 = 100000;
		var populationScore2 = 200000; 
		var populationScore3 = 500000;
		var populationScore4 = 1000000;
		var populationScore5 = 20000000;
    }
	document.getElementById('populationLegend').innerHTML =
	"<div id='populationLegend'>" +
	"<div class='legend-title'>Population</div>" +
	"<div class='legend-scale'>" +
		"<ul class='legend-labels'>" +
			"<li><span style='background:" + populationColor1 + "'></span>0 - " + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
			"<li><span style='background:" + populationColor2 + "'></span>" + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
			"<li><span style='background:" + populationColor3 + "'></span>" + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
			"<li><span style='background:" + populationColor4 + "'></span>" + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
			"<li><span style='background:" + populationColor5 + "'></span>" + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore5.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
		"</ul>" +
	"</div>" +
	"</div>";
}
function show1() {
  document.getElementById('my-legend').style.display = 'none';
}
function show2(){
  document.getElementById('my-legend').style.display = 'block';
  document.getElementById('populationLegend').style.display = 'block';
}
populateLegend(1);

#my-legend {
	position: absolute;
	bottom: 5%;
	left: 2%;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	font-family: 'Roboto','sans-serif';
	line-height: 30px;
	padding-left: 10px;
	border-radius: 3px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	display: none;
	}
  #my-legend .legend-title {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 90%;
    }
  #my-legend .legend-scale ul {
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    float: left;
    list-style: none;
    }
  #my-legend .legend-scale ul li {
    font-size: 70%;
    list-style: none;
    margin-left: 0;
    line-height: 16px;
    margin-bottom: 2px;
    }
  #my-legend ul.legend-labels li span {
    display: block;
    float: left;
    height: 17px;
    width: 20px;
    margin-right: 5px;
    margin-left: 0;
    }
  #my-legend ul.legend-labels li:first-child  span {
	border-radius: 4px 4px 0 0;
    }
  #my-legend ul.legend-labels li:last-child  span {
	border-radius: 0 0 4px 4px;	  
    }		
  #my-legend a {
    color: #777;
    }
  input #a {
	border: 1px black solid;
	border-radius: 4px 0 0 4px;
	}

<div id="maptype">	
<div id="content">

<form class="form">
	<div class="switch-field">
		<input type="radio" id="area1" name="switch-two" checked onClick="populateLegend(1);"/>
		<label for="area1">Area 1</label>
		<input type="radio" id="area2" name="switch-two" onClick="populateLegend(2);"/>
		<label for="area2">Area 2</label>
	</div>
</form>

<label class="container" style="margin-top: 12px;" onclick="show1();">No Legend
  <input type="radio" checked="checked" name="radio" id="area">
  <span class="checkmark"></span>
</label>
<label class="container" onclick="show2();">Legend
  <input type="radio" name="radio" id="Population">
  <span class="checkmark"></span>
</label>
</div>
</div>
		<div id="my-legend">
		<div id="populationLegend">
    
		</div>		
		</div>

That being said, the correct way of coding this UI is to add the HTML of the legend into the page, and upon change of the radio selection, find the correct DOM elements using JS (using class name or ID) and alter the values. Something like so (although it should be optimised further for DRY purposes)

var map;
// LEGEND SCORES
// Population Map Score  
var switch2 = document.getElementsByName('switch-two');

for(i=0; i<switch2.length; i++) {
  switch2[i].addEventListener('change',function(e) {
    if( e.target.checked && e.target.value == 1 ) {
      document.getElementsByClassName('ps1')[0].innerHTML = '50,000';
      document.getElementsByClassName('ps2')[0].innerHTML = '100,000';
      document.getElementsByClassName('ps3')[0].innerHTML = '250,000';
      document.getElementsByClassName('ps4')[0].innerHTML = '500,000';
      document.getElementsByClassName('ps5')[0].innerHTML = '10,000,000';
      document.getElementsByClassName('ps1')[1].innerHTML = '50,000';
      document.getElementsByClassName('ps2')[1].innerHTML = '100,000';
      document.getElementsByClassName('ps3')[1].innerHTML = '250,000';
      document.getElementsByClassName('ps4')[1].innerHTML = '500,000';
    } else if (e.target.checked && e.target.value == 2) {
      document.getElementsByClassName('ps1')[0].innerHTML = '100,000';
      document.getElementsByClassName('ps2')[0].innerHTML = '200,000';
      document.getElementsByClassName('ps3')[0].innerHTML = '500,000';
      document.getElementsByClassName('ps4')[0].innerHTML = '1,000,000';
      document.getElementsByClassName('ps5')[0].innerHTML = '20,000,000';
      document.getElementsByClassName('ps1')[1].innerHTML = '100,000';
      document.getElementsByClassName('ps2')[1].innerHTML = '200,000';
      document.getElementsByClassName('ps3')[1].innerHTML = '500,000';
      document.getElementsByClassName('ps4')[1].innerHTML = '1,000,000';
    }
  });
}

function show1(){
  document.getElementById('my-legend').style.display ='none';	
}
function show2(){
  document.getElementById('my-legend').style.display = 'block';
  document.getElementById('populationLegend').style.display = 'block';
}

#my-legend {
	position: absolute;
	bottom: 5%;
	left: 2%;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	font-family: 'Roboto','sans-serif';
	line-height: 30px;
	padding-left: 10px;
	border-radius: 3px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	display: none;
	}
  #my-legend .legend-title {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 90%;
    }
  #my-legend .legend-scale ul {
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    float: left;
    list-style: none;
    }
  #my-legend .legend-scale ul li {
    font-size: 70%;
    list-style: none;
    margin-left: 0;
    line-height: 16px;
    margin-bottom: 2px;
    }
  #my-legend ul.legend-labels li span.bg-color {
    display: block;
    float: left;
    height: 17px;
    width: 20px;
    margin-right: 5px;
    margin-left: 0;
    }
  #my-legend ul.legend-labels li:first-child  span.bg-color {
	border-radius: 4px 4px 0 0;
    }
  #my-legend ul.legend-labels li:last-child  span.bg-color {
	border-radius: 0 0 4px 4px;	  
    }		
  #my-legend a {
    color: #777;
    }
  input #a {
	border: 1px black solid;
	border-radius: 4px 0 0 4px;
	}

<div id="maptype">	
<div id="content">

<form class="form">
	<div class="switch-field">
		<input type="radio" id="area1" name="switch-two" value="1" checked/>
		<label for="area1">Area 1</label>
		<input type="radio" id="area2" name="switch-two" value="2"/>
		<label for="area2">Area 2</label>
	</div>
</form>

<label class="container" style="margin-top: 12px;" onclick="show1();">No Legend
  <input type="radio" checked="checked" name="radio" id="area">
  <span class="checkmark"></span>
</label>
<label class="container" onclick="show2();">Legend
  <input type="radio" name="radio" id="Population">
  <span class="checkmark"></span>
</label>
</div>
</div>
		<div id="my-legend">
		<div id="populationLegend">
      <div class="legend-title">Population</div><div class="legend-scale">
        <ul class="legend-labels">
          <li><span class="bg-color" style="background:#edf8fb"></span>0 - <span class="ps1">50,000</span></li>   
          <li><span class="bg-color" style="background:#b2e2e2"></span><span class="ps1">50,000</span> - <span class="ps2">100,000</span></li>
          <li><span class="bg-color" style="background:#66c2a4"></span><span class="ps2">100,000</span> - <span class="ps3">250,000</span></li>
          <li><span class="bg-color" style="background:#2ca25f"></span><span class="ps3">250,000</span> - <span class="ps4">500,000</span></li>
          <li><span class="bg-color" style="background:#006d2c"></span><span class="ps4">500,000</span> - <span class="ps5">10,000,000</span></li>
        </ul>
      </div>
		</div>		
		</div>

mackbex · Accepted Answer · 2019-04-22 03:01:13Z

Related your code you should populate the innerHTML contents each time the radio button clicked.

i want see your full code but in the snippet it seems your the javascript code runs like built in which it supposed to be dynamically.

in example, every time you clicking second button (show2() function) you should change the function from display style changes to re-writing inner html.

and i'd recommend that define another function which draws the legend html receiving the population values as a parameter or referring member variables.

Collectives™ on Stack Overflow

Change Variable Values On Checkbox

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions