Hide and Show DIV using strict javascript with no embedded JS or CSS

Question

I have searched and searched over so many previously answered questions and to my surprise, NONE of them answer what I am trying to accomplish. with JQuery this is easy but I am struggling with strict javascript.

I cannot have any embedded JS OR CSS in the html...

This is what I have so far:

function showhide()
{
    var billingaddress = document.getElementById("billingaddress");
    if (billingaddress.style.display === "block")
        {
            billingaddress.style.display = "none";
        }
    else if (billingaddress.style.display === "none")
        {
            billingaddress.style.display = "block";
        }
}

function init () 
{   
    var billingcheckbox = document.getElementById("billing");

    if (billingcheckbox.checked)
        {
            showhide();
        } 
    else 
        {
            showhide();
        }

It is hidden by default using CSS.

Cheers,

Also, re-querying the billingaddress is a waste. Instead pass it as a parameter to showhide. — evolutionxbox
– evolutionxbox, Commented Apr 19, 2017 at 14:06
Then what's the problem? Apart from your init function missing a closing brace. — evolutionxbox
– evolutionxbox, Commented Apr 19, 2017 at 14:09
well I have a bit more code below that I didn't include because that is fine and working... Its that my div does not show or hide when I click the checkbox. it is always hidden... nothing changes.. All other functions work within the js file — Noob
– Noob, Commented Apr 19, 2017 at 14:10

arc · Accepted Answer · 2017-04-19 14:15:45Z

1

With he code you've provided, it can be done like this.

billingaddress.style.display is empty by default, you can easily check it in the if without a comparison.

function showhide() {
  if (billingaddress.style.display) billingaddress.style.display = ""
  else billingaddress.style.display = 'none';
}

var billingaddress = document.getElementById("billingaddress")
var billingcheckbox = document.getElementById("billing")
billingcheckbox.addEventListener('change', showhide)
billingcheckbox.checked = true
showhide()

<input type="checkbox" id="billing"/> Hide
<div id="billingaddress">Lorem Ipsum</div>

edited Apr 19, 2017 at 14:15

answered Apr 19, 2017 at 14:12

arc

4,7515 gold badges37 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

evolutionxbox Over a year ago

Any reason to not use addEventListener?

Noob Over a year ago

but isnt using the onchange="showhide()" embedding Javascript?

Noob Over a year ago

I'll try an addEventListener... see how I go

arc Over a year ago

@Jonathan sorry, I was a bit to eager to post this answer. I made an update

Noob Over a year ago

@arcs mate you are a legend. all i did was set the billingcheckbox.checked = false. as thats the default I wanted it. but now it works like a charm. you legend!

|

Artem Lopatiy · Accepted Answer · 2017-04-19 14:21:01Z

1

It's as easy as this:

this keyword inside event handler references checkbox element so you can get checkbox state with this.checked property.

<input type="checkbox" id="billing">
<input type="text" id="billingaddress" placeholder="Address" style="display:none">
<script>
  var billingAddress = document.getElementById("billingaddress");
  var billingCheckbox = document.getElementById("billing");

  billingCheckbox.addEventListener('click', function(event) {
    billingAddress.style.display = this.checked ? "block" : "none";
  })
</script>

answered Apr 19, 2017 at 14:21

Artem Lopatiy

9385 silver badges15 bronze badges

Comments

J. Rab · Accepted Answer · 2017-04-19 14:22:18Z

0

The code below should do it -- but to be sure make sure all your IDs are matching up with what is in the HTML markup:

function showhide(show) {   

    var billingaddress = document.getElementById("billingaddress"); 

    if (show) { 

        billingaddress.style.display = "block"; 

    } else {    

        billingaddress.style.display = "none";
    }
}   

function init () {   

    var billingcheckbox = document.getElementById("billing");   

    if (billingcheckbox.checked) {  

        showhide(true); 

    } else {    

        showhide(false);
    }
}

answered Apr 19, 2017 at 14:22

J. Rab

113 bronze badges

2 Comments

Noob Over a year ago

just tried it. sorry mate it didn't work. I tried something like that earlier and it didn't work either. mr ARCS above got it working spot on.

J. Rab Over a year ago

Ah I think having an event handler/listener is what's missing in my solution. Glad you got it working! Thanks for the update :)

Collectives™ on Stack Overflow

Hide and Show DIV using strict javascript with no embedded JS or CSS

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related