jQuery code to update a paragraph when a heading is clicked

by vigneshchennai74 Updated: Apr 11, 2023

Guide Kit

This jQuery code updates the content and styling of a paragraph element when a heading element is clicked. The code waits for the document to be ready, then assigns a click event listener to the heading element using the jQuery click() method.

When the heading element is clicked, the code uses jQuery to select the paragraph element by its ID and then sets the font-weight property of the paragraph element to bold using the css() method. It also updates the text content of the paragraph element to "this is an updated paragraph" using the html() method.

This code helps create an interactive user interface by allowing users to update the content and styling of a paragraph element by clicking on a heading element. This functionality is used in web applications where users must perform actions or update information on the page. Using jQuery makes the code concise and easy to understand, making it a popular choice for front-end web development.

Preview of the output that you will get on running this code from your IDE

Code

Cannot change CSS style with jQuery

JavaScriptLines of Code : 21License : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries :

$('#pText').css("font-weight", "bold");

document.getElementById('pText').innerHTML = "this is updated paragraph";

$('#pText').html("this is updated paragraph");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <h3>Click on this heading to update below paragraph </h3>
    <p id="pText">this is a paragrah</p>

    <script>
        $(document).ready(function () {
            $("h3").click(function () {
                $('#pText').css("font-weight", "bold");
                $('#pText').html("this is updated paragraph"); // you can use jQuery here
            });
        });
    </script>

</body>

Instructions

Download and install VS Code on your desktop.
Open VS Code and create a new file in the editor.
Copy the code snippet that you want to run, using the "Copy" button or by selecting the text and using the copy command (Ctrl+C on Windows/Linux or Cmd+C on Mac).Copy HTML tags in html file. Please copy only the last part of the code starting from <script> and ending with </script>.
Paste the code into your file in VS Code, and save the file with a meaningful name and the appropriate file extension (.html for HTML, .js for JavaScript, etc.).
To run the code, open the file in VS Code and click the "Run" button in the top menu, or use the keyboard shortcut Ctrl+Alt+N (on Windows and Linux) or Cmd+Alt+N (on Mac). The output of your code will appear in the VS Code output console.

I hope you found this useful. I have added the version information in the following sections.

I found this code snippet by searching for " Cannot change CSS style with jQuery" in kandi. You can try any such use case!

Environment Tested

Tested this solution in the following versions. Be mindful of changes when working with other versions.

Visual Studio Code Version 1.76.0

This code helps in creating an interactive user interface by allowing users to update the content and styling of a paragraph element by clicking on a heading element. This process also facilities an easy to use, hassle free method to create a hands-on working version of code which would help us an update styles in HTML.

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

jQuery code to update a paragraph when a heading is clicked

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow