How to change the display property in a css class using js when user clicks a button

Question

I'm building a webapp that I plan on converting to a smartphone app using Phone Gap Build. I've never done this before so may not be describing my problem clearly but here goes. I started using the jquery mobile sample in Dreamweaver, this has multiple pages in a single html file. What I'd like to do is have a series of English phrases on each page, each English phrase will be followed by the formal Spanish translation and then the informal Spanish translation. At the top of the page the user will have three buttons saying "Formal", "Informal" and "Formal & Informal". The user will always see the English phrases followed by the Formal, Informal or Formal & Informal Spanish depending on which buttons they pressed/ tapped.

The home page can be seen here http://www.pslt.biz/mobileApp/LE4/index3.html then click "Age, Weight & Height" and you'll see that clicking the Formal/ Informal buttons has no effect on the Spanish underneath the first phrase "How old are you". If it helps here's the Formal button which should set the CSS class ".formal" to Display:Block and the ".informal" class to Display:None

     <a href="#" onclick="document.getElementById('formal').style.display='block';document.getElementById('informal').style.display='none';">Display   Formal</a>

The CSS classes are defined externally as follows:

    .formal { display:block;
    }

    .informal {display:block;
    }

And the Spanish phrases are defined in divs as follows:

     <div class="formal"> <!-- Start Formal -->
             <div style="float:left">
                 <a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
                 <img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
              </div>
              <div style="float:left">
                  Cuántos años tiene?
              </div>
      </div> <!-- End Formal -->
      <div class="informal"> <!-- Start informal -->
              <div style="clear:left">
                  <div  style="float:left">
                      <a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
                      <img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
                  </div>
                  <div>
                       Cuántos años tienes?
                  </div>
              </div>
      </div> <!-- End informal -->

If anyone could point me in the right direction I'd really appreciate it, I thought it would be simple to do but I must be missing something blindingly obvious.

Do you just need to toggle (show / hide) these divs ?

FLX
– FLX

2013-06-04 10:51:54 +00:00
Commented Jun 4, 2013 at 10:51 — FLX
– FLX, Commented Jun 4, 2013 at 10:51

Mifeet · Accepted Answer · 2013-06-04 11:31:38Z

1

You can use jQuery:

<a href="#" 
    onclick="$('.formal').css('display', 'block'); $('.informal').css('display', 'none');">Display Formal</a>

The problem is your divs have classes "formal" and "informal", not ids and you are selecting by ID.

Another option:

    <a href="#" onclick="$('.formal').show();$('.informal').hide()">Display Formal</a>

edited Jun 4, 2013 at 11:31

answered Jun 4, 2013 at 11:13

Mifeet

13.8k6 gold badges62 silver badges110 bronze badges

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

2 Comments

Tony Babb Over a year ago

I used the second option above and it worked using show/ hide and it worked. Thank you so much. next I'll test to see if setting Formal/ Informal will be remembered when I go to a different page, I'm using Jquery Mobile so all pages are in the same physical html page. Ideally I'd like that to work but I think my users can live without that feature. Thanks again to all for your input, I was hitting ab brick wall until you all stepped forward to help, thanks again.

Tony Babb Over a year ago

It remembers what to display when I change pages - that's exactly what I wanted. thank you all so much.

Praveen · Accepted Answer · 2013-06-04 11:03:50Z

1

Use getElementsByClassName() instead of getElementById().

You have selector by class name, not by id Or replace class="informal" and class="formal" with id="informa1" etc.

edited Jun 4, 2013 at 11:03

Praveen

56.7k35 gold badges138 silver badges170 bronze badges

answered Jun 4, 2013 at 10:55

Groonel

191 bronze badge

10 Comments

MasNotsram Over a year ago

Note: getElementsByClassName() will not work before IE9, just in case anyone is concerned.

bouscher Over a year ago

Since he's having jQuery already loaded, he might just as well use the jquery selectors: $('.formal').hide() / show()

Luca Over a year ago

@bouscher your comment should be an answer and should be the accepted one!

Luca Over a year ago

actually he should just use .toggle()

Luca Over a year ago

as for @groonel answer - class shouldn't be replaced with id; there should be an id to be used as the js hook and a then the class should be set to formal/informal. keep javascript unobstrusive and avoid id replacement

|

Tony Babb · Accepted Answer · 2013-06-06 11:04:40Z

1

The solution from MiFeet worked perfectly. I used Display Formal

For some reason I was unable to show that as the answer, I received an error when I clicked on the checkbox, I hope this helps someone else.

Tony Babb

answered Jun 6, 2013 at 11:04

Tony Babb

851 gold badge1 silver badge9 bronze badges

1 Comment

Mifeet Over a year ago

Does it really throw an error? That's strange, could you try again?

Ziyaddin Sadygly · Accepted Answer · 2013-06-04 11:03:48Z

0

JS code:

button.onclick=function(){

    element=document.getElementsByClassName("formal")[0];
    element.className="informal";

}

answered Jun 4, 2013 at 11:03

Ziyaddin Sadygly

9,89214 gold badges36 silver badges42 bronze badges

Comments

tkanzakic · Accepted Answer · 2013-06-04 13:33:23Z

0

if you have class="informal" then replace it with class="informal1" and try this

<a href="#" onclick="change();" id="remove" class="informal">Display Formal</a>

function change(){

$('#remove').removeClass('informal');
$("#remove").addClass("informal1");

}

edited Jun 4, 2013 at 13:33

tkanzakic

5,49516 gold badges36 silver badges41 bronze badges

answered Jun 4, 2013 at 13:13

Muhammad Saqlain Arif

5441 gold badge5 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to change the display property in a css class using js when user clicks a button

5 Answers 5

2 Comments

10 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

10 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related