How do I change a tag's inner HTML based on their order in JavaScript?

JavascriptWeb DevelopmentFront End TechnologyObject Oriented Programming

For this, use document.querySelectorAll().

Example

Following is the code −

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
   <p class="numberDemo">My Paragraph</p>
   <p class="numberDemo">My Paragraph</p>
   <p class="numberDemo">My Paragraph</p>
  <button id="orderDemo">Click to Order the Paragraph</button>
</body>
<script>
   document.getElementById('orderDemo')
      .addEventListener('click', function (e) {
         var allHTMLValues = document.querySelectorAll('.numberDemo');
         var counter = 1;
         for (temp of allHTMLValues) {
            temp.innerText = 'The Paragraph is in order ' + (counter);
            counter = counter + 1;
         }
      });
</script>
</html>

To run the above program, save the file name “anyName.html(index.html)”. Righ click on the file and select the option “Open with Live Server” in Visual Studio Code editor.

Output

This will produce the following output on console −

On clicking the button, you will get a sequence −

raja
Published on 09-Nov-2020 08:39:34
Advertisements