How do I change the font family of a paragraph when it is clicked? Im using jQuery-CodePudding

so, I've been trying to make a jQuery function that would change the font style of a paragraph once it is clicked.

Here is the code I've tried:

$(document).ready(function() {
  $("#story-p").click(function() {
    $(this).css({
      "font-family": "Arial, Helvetica, sans-serif",
      "font-size": "200%",
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <img  src="restaurant.jpg" style="display: none" />
  <h1 >Fuego</h1>
  <div >
    <h1 >Our Story</h1>
    <p >
      Test
    </p>
</body>

I can't figure out why it wouldn't work?

Am I missing something?

Many thanks

CodePudding user response：

Its not working because you selector to attach the click event uses $('#story-p') which means its targeting an element with id=story-p but your paragraph does not have an id instead it has the class as story-p.

So change your selector like below and it will start working.

$(document).ready(function() {
  $(".story-p").click(function() {
    $(this).css({
      "font-family": "Arial, Helvetica, sans-serif",
      "font-size": "200%",
    });
  });
});

<body>
  <img  src="restaurant.jpg" style="display: none" />
  <h1 >Fuego</h1>
  <div >
    <h1 >Our Story</h1>
    <p >
      We are an Asian inspired streetfood restaurant located in the Cape Town CBD. We pool together recipes from Vietnam, Thailand and Japan and create an authentic Asian food experience here in South Africa. Our owners, have spent years working in restaurants
      all over Asia and have collaborated to create a collection of their favourite and most popular dishes. We have been open now for 2 years and plan to continue this journey well into the future. Come and visit us!
    </p>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

// first of all with modern javascript you don't really need to use jquery. And you used the wrong selector for your paragraph elemnet.

<script>
    $(document).ready(function(){
        $(".story-p").click(function(){
        $(this).css("font-family", "Arial, Helvetica, sans-serif");});
    });
</script>