เปลี่ยน inner HTML ของแท็กตามลำดับด้วย JavaScript

ใช้ document.querySelectorAll() เลือก element ทั้งหมด แล้ววนลูปเปลี่ยนข้อความตามลำดับ

ตัวอย่างโค้ด

<!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>

บันทึกเป็น index.html เปิดด้วย Live Server

ผลลัพธ์

ก่อนกดปุ่ม: แสดง "My Paragraph" ทั้ง 3 บรรทัด
หลังกดปุ่ม: แสดง "The Paragraph is in order 1", "The Paragraph is in order 2", "The Paragraph is in order 3"

คำอธิบาย: querySelectorAll() คืน NodeList ใช้ for...of วนลูป innerText ตั้งค่าข้อความใหม่