Selecting Content on Click with JavaScript

The ‘click and select’ feature simplifies content selection for users. With a single click, they can select text without dragging their cursor. This subtle improvement enhances the web application’s usability by making interactions faster and smoother.

Selecting Content on Click with JavaScript

In web development, providing a seamless and user-friendly experience is paramount. One common user interaction involves selecting and copying content. In this article, we’ll explore a simple JavaScript solution to enhance the user experience by allowing users to select the content of a <code> element with a single click.

The Challenge

Consider a scenario where you have multiple <code> elements representing different data categories such as teams, dates, and locations. The challenge is to enable users to effortlessly select the content within these elements without having to resort to the traditional method of manually dragging to highlight the text.

The Solution

Our solution involves utilizing JavaScript to detect a click on a <code> element and programmatically selecting its content. Let’s break down the steps.

HTML Structure

Firstly, our HTML contains several <code> elements, each with a specific class, « click-select »:

<code class="click-select">#FIRST_TEAM#</code>
<code class="click-select">#SECOND_TEAM#</code>
<!-- ... other code elements ... -->


We apply a basic CSS style to give the user a visual cue that the content is clickable:

.click-select {
  cursor: pointer;

JavaScript Implementation

Now, the magic happens with JavaScript. We employ the querySelectorAll method to select all elements with the « click-select » class. For each of these elements, we attach a click event listener.

document.addEventListener('DOMContentLoaded', function() {
  var codeElements = document.querySelectorAll('.click-select');

  codeElements.forEach(function(codeElement) {
    codeElement.addEventListener('click', function() {
      var range = document.createRange();

      var selection = window.getSelection();

How It Works

  1. Event Listener: When the DOM content is fully loaded, the JavaScript code selects all elements with the « click-select » class.
  2. Click Event: For each of these elements, a click event listener is added.
  3. Range and Selection: When an element is clicked, a range is created that encompasses the content of the clicked <code> element. The selectNodeContents method is used for this purpose. Subsequently, the window.getSelection() method retrieves the current selection, and any existing ranges are cleared. The newly created range is then added to the selection, effectively highlighting the content.


This solution improves the user experience by simplifying the content selection process. Users no longer need to drag their cursor to highlight text; a single click achieves the same result. It’s a subtle enhancement that can contribute to a smoother and more efficient interaction with your web application.


In web development, small details can make a significant impact on user experience. The ability to select content with a single click, as demonstrated in this article, is a testament to the power of JavaScript in enhancing the usability of a website. Consider implementing similar solutions to streamline user interactions and make your web applications more user-friendly.