I have function here which loop through the the button and find there innerHTML length.
I tried to use Math.max to find max length value but couldn't as the result is showing the last value only .
As you can see from code used a loop, how to know the value of i which has max value (here also last value is printed)
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>You're using Math.max incorrectly here. Math.max returns the largest number passed to it from a list of arguments. You're only passing one of the lengths to it at a time, so it will always return the value of that one number, making your if statement always evaluate to true.
Instead, you can put all of the lengths into an array and use Math.max to find the largest value in that array.
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>