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 class="background" src="restaurant.jpg" style="display: none" />
<h1 class="heading">Fuego</h1>
<div class="container">
<h1 class="story">Our Story</h1>
<p class="story-p">
Test
</p>
</body>I can't figure out why it wouldn't work?
Am I missing something?
Many thanks
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 class="background" src="restaurant.jpg" style="display: none" />
<h1 class="heading">Fuego</h1>
<div class="container">
<h1 class="story">Our Story</h1>
<p class="story-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>// 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>