Change Styles on Double Click

Double-click here to highlight all the paragraphs below.

Paragraph 1

Paragraph 2

Paragraph 3

Return to Double click tutorial

Complete JavaScript Source

const trigger = document.getElementById('highlightTrigger');
const paragraphs = document.querySelectorAll('.highlightTarget');
function toggleHighlight(){ paragraphs.forEach((p) => p.classList.toggle('highlight')); }
trigger.addEventListener('dblclick', toggleHighlight);
trigger.addEventListener('keydown', (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleHighlight(); } });

Complete HTML Source

<p id="highlightTrigger" class="text-primary" tabindex="0">Double-click here to highlight all the paragraphs below.</p>
<p class="highlightTarget">Paragraph 1</p><p class="highlightTarget">Paragraph 2</p><p class="highlightTarget">Paragraph 3</p>

CSS Used by This Demo

<style>.highlight{background-color:yellow;color:red;}</style>