Unhide div using javascript object oriented

Question

So i am having trouble unhiding a div, once it has been hidden.

The code:

First object

$('#filter_region').on('change', function(e) {

      var temp_region_id = $('#filter_region').val();

      filterRegionId($temp_region_id);

   });

Seconds object:

function filterRegionId(temp_region_id)
{

    if ($(temp_region_id) != 1) {


       $('.showheadline').hide(); }

    else { $('.showheadline').show(); }

}

Really what i want to do, is once the region is changed from the original, the div should be hidden - this works!

However, once the person goes back on the same region, the div is still hidden.

The filter_region echos from 1-8 depending on the region. I realise that i have set the region to 1, this is to test. However, even if the if-statement is set to 1, it still shows the divs when loaded, even if the region is 2-8. Hope this make any sense at all! Please feel free to ask if there are any questions regarding my explanation.

Best Regards, Patrick

Answer 1

Try this, without the $(..) around the var

$('#filter_region').on('change', function(e) {    
     var temp_region_id = $('#filter_region').val();    
     filterRegionId(temp_region_id);
 });

function filterRegionId(temp_region_id)
{    
    if (temp_region_id != 1) {        
       $('.showheadline').hide(); 
    }    
    else { 
       $('.showheadline').show(); 
    }    
}

Answer 2

A text input's value attribute will always return a string. You need to parseInt the value to get an integer

 var temp_region_id = parseInt($('#filter_region').val(),10);

and remove the $ from variable name filterRegionId($temp_region_id); and if ($(temp_region_id) != 1) {

---

$('#filter_region').on('change', function(e) {
      var temp_region_id = parseInt($('#filter_region').val(),10);
      ///parse it to integer
      filterRegionId(temp_region_id);
   });

---

function filterRegionId(temp_region_id){
    if (temp_region_id!= 1)
       $('.showheadline').hide();
    else
       $('.showheadline').show();
}

Answer 3

The best solution is to rewrite you code a little. Please add the filterRegion function on top and change the parametter name as follows

 var temp_region_id = $('#filter_region').val();
 filterRegionId(temp_region_id);
  $('#filter_region').on('change', function(e) {
  temp_region_id= $('#filter_region').val();
  filterRegionId(temp_region_id);
   });

function filterRegionId(temp_region_id)
{
if ($(temp_region_id) != 1) {
   $('.showheadline').hide(); 
}
else { 
     $('.showheadline').show(); 
   }
}