I am using function that makes a clicked button bold while making its other sibling buttons normal font weight. The function works correctly but I am getting a warning in JSHint saying Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (gLength, buttonParent). I tried using let instead of var in the code below but the warning is still there. How can I fix the issue that JSHint shows?
function boldButton(buttonParent) {
buttonParent = buttonParent.querySelectorAll("BUTTON");
if (buttonParent) {
for (var g = 0, gLength = buttonParent.length; g < gLength; g++) {
// set all buttons as normal font before setting a clicked button as bold font:
buttonParent[g].addEventListener('click', function() {
for (var r = 0; r < gLength; r++) {
buttonParent[r].style.fontWeight = "normal";
}
// set the clicked button as bold font:
this.style.fontWeight = "bold";
}, false);
}
}
}
var buttonWrap = document.getElementById("button-wrap");
boldButton(buttonWrap);<div id="button-wrap">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>