Tengo una función aquí que recorre el button y encuentra la longitud innerHTML de HTML.
Traté de usar Math.max para encontrar el valor de longitud máxima, pero no pude porque el resultado muestra solo el último valor.
Como puede ver en el código que usó un bucle, cómo saber el valor de i que tiene un valor máximo (aquí también se imprime el último valor)
function widthBtn() { var reed = document.getElementsByClassName("container")[0].getElementsByTagName("BUTTON"); var reed1 = document.getElementsByClassName("demo") for (let i = 0; i < reed.length; i++) { reed1[i].innerHTML = reed[i].innerHTML.length document.getElementById("demon1").innerHTML = Math.max(reed[i].innerHTML.length) if (reed[i].innerHTML.length == Math.max(reed[i].innerHTML.length)) { document.getElementById("demon").innerHTML = i; } else { document.getElementById("demon").innerHTML = "no" } } } widthBtn(); .container { width: 1000px; height: 100px; border: 1px solid black; display: flex; justify-content: space-between } button { width: 350px; } <div class="container"> <!--span tag is used which act as container for button to preserve the button default height can remove it to span the whole height of container by button--> <button>This text is way more long than the other (very right)</button> <button>Little text (very left)</button> </div> <span>Length of text in 1st btn : <span class="demo"></span></span><br> <span>Length of text in 2nd btn : <span class="demo"></span></span><br> <span>Highest length of btn : <span id="demon1"></span></span><br> <span>ith position of highest value : <span id="demon"></span></span><br>Estás usando Math.max incorrectamente aquí. Math.max devuelve el número más grande que se le pasó de una lista de argumentos. Solo le está pasando una de las longitudes a la vez, por lo que siempre devolverá el valor de ese número, haciendo que su declaración if siempre se evalúe como verdadera.
En cambio, puede poner todas las longitudes en una matriz y usar Math.max para encontrar el valor más grande en esa matriz.
let lengths = Array.from(reed).map(e => e.innerHTML.length); let max = Math.max(...lengths); document.getElementById("demon1").innerHTML = max; function widthBtn() { var reed = document.getElementsByClassName("container")[0].getElementsByTagName("BUTTON"); var reed1 = document.getElementsByClassName("demo") let lengths = Array.from(reed).map(e => e.innerHTML.length); let max = Math.max(...lengths); document.getElementById("demon1").innerHTML = max; for (let i = 0; i < reed.length; i++) { reed1[i].innerHTML = reed[i].innerHTML.length if (reed[i].innerHTML.length == max) { document.getElementById("demon").innerHTML = i; } } } widthBtn(); .container { width: 1000px; height: 100px; border: 1px solid black; display: flex; justify-content: space-between } button { width: 350px; } <div class="container"> <!--span tag is used which act as container for button to preserve the button default height can remove it to span the whole height of container by button--> <button>This text is way more long than the other (very right)</button> <button>Little text (very left)</button> </div> <span>Length of text in 1st btn : <span class="demo"></span></span><br> <span>Length of text in 2nd btn : <span class="demo"></span></span><br> <span>Highest length of btn : <span id="demon1"></span></span><br> <span>ith position of highest value : <span id="demon"></span></span><br>