Скачать или смотреть How to Correctly Pass Clicked Element Text into an Input Field with JavaScript or jQuery

Discover how to effectively capture text from a clicked element and insert it into an input field using jQuery or plain JavaScript.
---
This video is based on the question https://stackoverflow.com/q/71410200/ asked by the user 'Designer' ( https://stackoverflow.com/u/8040241/ ) and on the answer https://stackoverflow.com/a/71410303/ provided by the user 'fdomn-m' ( https://stackoverflow.com/u/2181514/ ) 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: On element click get text of a child element and pass it in an input field using jquery or plain 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.
---
How to Correctly Pass Clicked Element Text into an Input Field with JavaScript or jQuery

When building interactive web applications, you may find yourself in situations where you need to retrieve and display certain data based on user actions. One common scenario is capturing the text of a clicked element and inserting that text into an input field.

In this guide, we'll delve into a problem that many developers face: when clicking on elements to retrieve data, all values populate an input field instead of just the selected one. We’ll explore the reasons behind this issue and provide a clear solution to fix it.

The Problem

Consider the scenario where you have multiple clickable <div> elements, each containing different numerical values. When you click on one of these elements, you want the corresponding number to be inserted into an input field.

Here’s an example structure:

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

In the initial code using jQuery, we encountered a problem where clicking any of the <div> elements would populate the input with all amounts instead of just the clicked value.

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

The line $(".hero-text").text() selects all elements with the class hero-text, resulting in all values being concatenated and passed to the input field.

The Solution

To solve this issue, we need to ensure that the click handler refers only to the specific child element of the clicked parent <div>. Below, we’ll outline the steps to correctly implement this.

Step-by-Step Explanation

Use this Keyword: In the event handler, this refers to the clicked element. By using this, we can directly access the text of the child element.

Accessing Inner Text: Instead of using jQuery's .text() which can be affected by whitespace, we can use this.innerText to get the clean value of the clicked element.

Updated Code

Now, let’s implement the recommended changes:

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

Complete Example

Here’s how your entire HTML, CSS, and JavaScript code would look after the fix:

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

Conclusion

By following the steps outlined in this post, you can effectively capture the text from a clicked element and display it in an input field without confusion. Remember, making good use of the this keyword in DOM events helps you access the specific elements you want to work with.

Next time you're building features that require interaction, keep this method in mind to ensure your data handling is spot on!