What I'm trying to do is have a page scroll to a particular <div> when it reloads after the user has submitted an incomplete form.
The function commentScroll(divID) is being called--I know this because the alert appears on page-load, and I know that it knows what <div> to scroll to because:
<div> id I pass to it, divID, and that is has gotten the element id by presenting the correct ele.id.<div> is toggled to display:block (and no other <div> is).But even though commentScroll(divID) is being called and knows what <div> to scroll to, it is not scrolling to the <div>.
I have confirmed that - is not a reserved character and should work as a <div> <id>, so this isn't the problem.
I have confirmed that ele.scrollIntoView(); ought to work because I use it in function eleScroll(divID) and it works there.
Could someone tell me why it is not?
Thanks in advance!
<html>
<script type="text/javascript">
function commentScroll(divID)
{
bool_debug = true; // 0;
const ele = document.getElementById(divID);
if (bool_debug) { alert("line 126:\n\n" + "divID = \"" + divID + "\""+ "\n" + "ele.id = \"" + ele.id + "\""); }
ele.scrollIntoView();
toggle_reply(divID);
} // function commentScroll(eleDiv)
function eleScroll(divID)
{
const ele = document.getElementById(divID);
ele.scrollIntoView();
} // function eleScroll(eleDiv)
function toggle_reply(id)
{
var array_reply = document.getElementsByClassName("div-reply");
for(var count_reply=0; count_reply<array_reply.length; count_reply++)
{
if (array_reply[count_reply].id != id) { array_reply[count_reply].style.display = "none"; }
} // for(var count_reply=0; count_reply<array_reply.length; count_reply++)
var div = document.getElementById(id);
div.style.display = div.style.display == "none" ? "block" : "none";
} // function toggle_reply(id)
</script>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="reply-97-1" class="div-reply" style="display:none; margin-bottom:5px; margin-left:22px;">
<table border="1" style="margin-bottom:5px; margin-left:26px; border:black thin solid; ">
<tr>
<td colspan="2">test 1</td>
</tr>
<tr>
<td align="left">P. James Norris - 9:01 am Thu 18 Jan 2024</td>
<td align="right"><button onclick="toggle_reply('reply-97-1')">reply</button></td>
</tr>
</table><!-- comment -->
<form name="comment" action="" method="post">
<input name="_id_blog" type="hidden" value="97-1" >
<table style="width:300px;">
<tr>
<td colspan="2">
<textarea id="comment_in_97-1" name="comment" name="" rows="7" cols="50"
placeholder="type your comment - 2500 characters"
onchange="countChars('comment_in_97-1', 'count_comment_97-1', 2500);"
onfocus="countChars('comment_in_97-1', 'count_comment_97-1', 2500);"
onkeydown="countChars('comment_in_97-1', 'count_comment_97-1', 2500);"
onkeyup="countChars('comment_in_97-1', 'count_comment_97-1', 2500);"
></textarea>
<br />
<span style="font-size:11px;">Characters Remaining: <span id="count_comment_97-1" style="color:black;"></span></span>
</td>
</tr>
<tr>
<td>
<input id="nameFirst-97-1" name="nameFirst" type="text"
placeholder="first name - 25 characters" value="" - 50 characters
onchange="countChars('nameFirst-97-1', 'count_nameFirst-97-1', 25);"
onfocus="countChars('nameFirst-97-1', 'count_nameFirst-97-1', 25);"
onkeydown="countChars('nameFirst-97-1', 'count_nameFirst-97-1', 25);"
onkeyup="countChars('nameFirst-97-1', 'count_nameFirst-97-1', 25);"
>
</td>
<td>
<input id="nameLast-97-1" name="nameLast" type="text"
placeholder="last name - 25 characters" value="" - 25 characters
onchange="countChars('nameLast-97-1', 'count_nameLast-97-1', 25);"
onfocus="countChars('nameLast-97-1', 'count_nameLast-97-1', 25);"
onkeydown="countChars('nameLast-97-1', 'count_nameLast-97-1', 25);"
onkeyup="countChars('nameLast-97-1', 'count_nameLast-97-1', 25);"
>
</td>
</tr>
<tr>
<td>
<span style="font-size:11px;">Characters Remaining: <span id="count_nameFirst-97-1" style="color:black; font-size:12px;"></span></span>
</td>
<td>
<span style="font-size:11px;">Characters Remaining: <span id="count_nameLast-97-1" style="color:black; font-size:12px;"></span></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="email-97-1" name="email" type="text"
placeholder="email - 50 characters" value="" - 50 characters
onchange="countChars('email-97-1', 'count_email-97-1', 50);"
onfocus="countChars('email-97-1', 'count_email-97-1', 50);"
onkeydown="countChars('email-97-1', 'count_email-97-1', 50);"
onkeyup="countChars('email-97-1', 'count_email-97-1', 50);"
>
<br />
<span style="font-size:11px;">Characters Remaining: <span id="count_email-97-1" style="color:black; font-size:12px;"></span></span>
<br />
<em>Only your name, not your email address, will appear in the comments area.</em>
<br />
<input name="submit" type="submit" value="post">
</td>
</tr>
</table>
</form> <!-- name="comment-entry" -->
</div> <!-- class="div-reply" -->
<script>commentScroll("reply-97-1"); </script>
</body>
</html>
You can't scroll to a div which is display:none!
By moving the toggle_reply(divID); BEFORE the ele.scrollIntoView();, suddenly everything works the way I want it to.