- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do I change a tag's inner HTML based on their order in JavaScript?
For this, use document.querySelectorAll().
Example
Following is the code −
<!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 −
Updated on 09-Nov-2020 08:39:34
- Related Questions & Answers
- Change string based on a condition - JavaScript
- How do I change a MongoDB user's password?
- How to change the order of a matrix in increasing order based on a single column?
- How do I wrap text in a <pre> tag in HTML?
- Sorting numbers based on their digit sums in JavaScript
- HTML <s> Tag
- How do I get a parent HTML Tag with Selenium WebDriver using Java?
- HTML <i> Tag
- How can I extract entire documents based on how they compare with their whole collection?
- How do I call a JavaScript function on page load?
- How do I display a list of objects based on a specific property with MongoDB?
- How do I change matplotlib's subplot projection of an existing axis?
- Display resultant array based on the object’s order determined by the first array in JavaScript?
- Change text color based on a brightness of the covered background area in HTML?
- ORDER BY records in MySQL based on a condition
Advertisements