Javascript focus not working in simple form-CodePudding

Autofill is working fine, but can't get focus() to work on the #lbs field via the onClick autofill link. I can get focus to work if it loads outside the function (see commented line before final script tag), but I need it to get focus after the autofill link is clicked.

here's the jsfiddle: https://jsfiddle.net/JoJoeHariguchi/p49cu607/1/

thanks for any help.

<body>
    <div  id="dig3">
    <a href="#dig3" onClick="autoFill('dig3'); return true;" >Auto Fill</a><br><br>
    <div>length: <input type="number" size="40" id="length" name="length" required /></div>
    <div>width: <input type="number" id="width" name="width" required /></div>
    <div>height: <input type="number" id="height" name="height" required /></div>
    <div>lb: <input type="number" id="lbs" name="lbs" required /></div>
    <div>oz: <input type="number" id="oz" name="oz" required /></div>

<script>
function autoFill(digID) {
document.querySelector(`#${digID} #length`).value = "15";
document.querySelector(`#${digID} #width`).value = "12";
document.querySelector(`#${digID} #height`).value = "3";

document.querySelector(`#${digID} #lbs`).focus();
}

//document.querySelector("#dig3 #lbs").focus();
</script>
</body>

CodePudding user response：

Auto Fill

your code is good, you just need to return false value after click on anchor tag