JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<button type="button" id="article1" class="article">article 1</button>
<button type="button" id="article2" class="article">article 2</button>
<button type="button" id="article3" class="article">article 3</button>
<button type="button" id="article4" class="article">article 4</button>
<button type="button" id="article5" class="article">article 5</button>

<div id="result"></div>

JavaScript

var articles = document.getElementsByClassName('article');
var result = document.getElementById('result');

var text = {
	article1: 'Texte de l\'article 1',
	article2: 'Texte de l\'article 2',
	article3: 'Texte de l\'article 3',
	article4: 'Texte de l\'article 4',
	article5: 'Texte de l\'article 5',
}

for (let article of articles) {
  article.addEventListener('click', function() {
    customalert(this.id);
  });
}

function customalert(articleid) {
  result.innerHTML = text[articleid];
}