I was trying to implement a system where I could output the div which has the highest download count inside that div (is just a number), but I have no particular skills in JavaScript.

I've found out one way to grab all of the divs and output them in console, but now I have to count the highest number in the innerText property for each div found:

const downloads = document.querySelectorAll("[class^='download_count']");
console.log(downloads);

For example I have:

<div >
 3
 <em ></em>
</div>

<div >
 16
 <em ></em>
</div>
<!-- The list continues... -->

I've tried multiple loops in JavaScript which would've counted the numbers and output the highest number by using an array and Math.max() but couldn't really get it properly working as I've stuttered upon properly making it output only one of the divs with highest number.

Expected behavior:

<div >
 3
 <em ></em>
</div>

<div >
 16
 <em ></em>
 <div >Most downloaded file on the website!</div>
</div>

CodePudding user response：

// All divs are here.
const divs = document.querySelectorAll('.download_count');

// Create virtual div.
const mostDownloadedDiv = document.createElement('div');
mostDownloadedDiv.className = 'most-downloaded';
mostDownloadedDiv.textContent = 'Most downloaded file on the website!';

// Calculate max downloaded, and then added the virtual div.
let counts = [];
divs.forEach(downloadCount=>counts.push(Number(downloadCount.textContent)));
divs[counts.indexOf(Math.max(...counts))].appendChild(mostDownloadedDiv);

<div >
  3
  <em ></em>
</div>

<div >
  16
  <em ></em>
</div>
 <!-- The list continues... -->

CodePudding user response：

• Try querySelector

const downloads = document.querySelectorAll('download_count');
// and find max value
Math.max(downloads);

or

const elements = document.getElementsByClassName('download_count');

CodePudding user response：

1. Use querySelectorAll to select all divs having class download_count
2. Traverse the array and save the div with the highest textContent value. (Convert textContent value from string to number so that leading and trailing spaces are not considered when doing the comparison)

let divNodes = document.querySelectorAll('.download_count');
divNodes = Array.from(divNodes);
const maxDownloadedDiv = divNodes.reduce((previousDiv, currentDiv) => {
   return Number(previousDiv.textContent) > Number(currentDiv.textContent) ? previousDiv : currentDiv;
});

3. Create the div for the Expected behaviour using document.createElement.
4. Append it as a child inside the previously saved div using appendChild.

const mostDownloaded = document.createElement('div');
mostDownloaded.classList.add('most-downloaded');
mostDownloaded.textContent = 'Most downloaded file on the website!';

maxDownloadedDiv.appendChild(mostDownloaded);

CodePudding user response：

I have another solution based from what Emre have answered, here's the code:

let downCounts = Array();
document.querySelectorAll('.download_count').forEach(elem => {
  downCounts.push(elem.innerText.trim())
});
downCounts.sort();
downCounts.reverse(); // It sorts from lowest to highest => we need to reverse so the first object in array is the highest

// Here you put the div styles of the div that will be put in the most downloaded 
var div = document.createElement("div");
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";

// Now we just create the div inside with the most downloads
document.querySelectorAll('.download_count').forEach(elem => {
  if (elem.innerText.trim() == downCounts[0])
  {
    elem.appendChild(div)
  }
});