CODEWITHSUNDEEP
javascriptjqueryhtmlevent-handlingfont-size
Vaibhav
Vaibhav

Reputation: 105

Unable to increase font size on click of a button

I want to change the font size of two divs when I click on a particular button however button click is not responding, pls help. I am using two div IDs in one selector. also pls let me know where is the error, below is my code.

<html>

<head>
<title>
Example 2
</title>

<style>

    body
    {
        margin:10px 2em;
    }
    .switcher
    {
        float:right;
        margin:10px;
        background-color:#ddd;
        border: 1px solid #000;
        padding : 10px;
        font-size:0.9em;
    }

    .large
    {
        font-size:2em;
    }

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function{
        $('#switcher-large').on('click',function(){
            $('#header, #chapter-preface').addClass('large');
        });
    });
</script>
</head>

<body>
<div id="container">

      <div id="switcher" class="switcher">
        <h3>Style Switcher</h3>
        <button id="switcher-default">
          Default
        </button>
        <button id="switcher-narrow">
          Narrow Column
        </button>
        <button id="switcher-large">
          Large Print
        </button>
      </div>

      <div id="header">
        <h2>A Christmas Carol</h2>
        <h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
        <div class="author">by Charles Dickens</div>
      </div>

      <div class="chapter" id="chapter-preface">
        <h3 class="chapter-title">Preface</h3>
        <p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me.  May it haunt their houses pleasantly, and no one wish to lay it.</p>
        <p>Their faithful Friend and Servant,</p>
        <p>C. D.</p>
        <p>December, 1843.</p>
      </div>


</body>

</html>

Upvotes: 0

Views: 88

Answers (2)

Mirza Arslan Baig
Mirza Arslan Baig

Reputation: 166

Try this

$('#header h2, #chapter-preface h3, #chapter-preface p').addClass('large');

Upvotes: 0

jennas
jennas

Reputation: 2464

You have a syntax error

Try replacing

$(document).ready(function{

for

$(document).ready(function(){

Upvotes: 1

Related Questions