CODEWITHSUNDEEP
javascriptcss
Tony Babb
Tony Babb

Reputation: 85

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

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.

Upvotes: 0

Views: 16104

Answers (5)

Tony Babb
Tony Babb

Reputation: 85

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

Upvotes: 1

Muhammad Saqlain Arif
Muhammad Saqlain Arif

Reputation: 544

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");

}

Upvotes: 0

Mifeet
Mifeet

Reputation: 13608

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>

Upvotes: 1

Groonel
Groonel

Reputation: 19

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.

Upvotes: 1

Ziyaddin Sadygly
Ziyaddin Sadygly

Reputation: 9646

JS code:

button.onclick=function(){

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

}

Upvotes: 0

Related Questions