Скачать или смотреть How to Capture p Elements Value on Button Click with JavaScript

Learn how to easily capture values of `p` elements when a button is clicked using JavaScript, including a step-by-step guide and code snippets!
---
This video is based on the question https://stackoverflow.com/q/64779841/ asked by the user 'user3718511' ( https://stackoverflow.com/u/3718511/ ) and on the answer https://stackoverflow.com/a/64779951/ provided by the user 'DenverCoder1' ( https://stackoverflow.com/u/11608064/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: how to capture p elements value when click event happened using JavaScript

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Capturing p Elements Values on Button Click Using JavaScript

Have you ever wanted to capture values from paragraph (<p>) elements in your web application when a button is clicked? If you're coding in JavaScript and faced with this challenge, you’re in the right place! In this guide, we will explore how to capture not just any text, but specific text values from multiple paragraph elements on button click. Let's dive in!

The Problem

In our example, we have a series of items displayed in a web application, each with a Get Started button. The HTML structure is as follows:

[[See Video to Reveal this Text or Code Snippet]]

When the button is clicked, we want to capture two pieces of information:

The first <p> element value ("Nebula")

The second <p> element value ("Price 1.44 /mo")

The Solution

To achieve this, we can utilize JavaScript event listeners. Here's how to do it step by step:

Step 1: Select All Buttons

First, we can use document.querySelectorAll to capture all buttons with the class .calculate-hosting. This allows us to attach an event listener to each button.

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Add Click Event Listeners

Next, we will loop through the selected buttons using forEach and add a click event listener. Inside the event listener, we will reference the current button with this, allowing us to access its parent elements.

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Capture Paragraph Values

Inside the event listener, we’ll access the parent of the button to find the paragraph elements that hold the desired text values. We can fetch the text using the innerText property.

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Extract the Price Value

We can further parse the price information from p2. Using a regular expression helps us get just the numeric price value.

[[See Video to Reveal this Text or Code Snippet]]

Final Code Example

Here is how the complete code looks:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Capturing values from p elements when a button is clicked in JavaScript can be straightforward once you understand how to navigate the DOM. By utilizing event listeners effectively and leveraging the properties of DOM elements, you can easily retrieve the data you need. Now, you can add similar functionality to your own web applications with confidence. Happy coding!