Element height does not change after updating innerHTML with XML HttpRequest

Question

How should solve the following problem?

The div content changes but height does not change after updating innerHTML by XMLHttpRequest.

This is the main file:

<html>
<head>
<script>
    function loadpage() 
    {   
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() 
        {
            if (this.readyState == 4 && this.status == 200) 
            {
                document.getElementById("mydiv").innerHTML = this.responseText;
            }
        }

        xhttp.open("GET", "page.html", true);
        xhttp.send();

        document.title = document.getElementById("mydiv").clientHeight;
    }

</script>
</head>

<body>
    <div id="mydiv" onclick="loadpage()">hello</div>
</body>
</html>

This is the file page.html

<html>
<body>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
</body>
</html>

`document.title = document.getElementById("mydiv").clientHeight;` does not magically keep running. It only runs when you execute it. If you want it to update, you need to run it again.... — epascarello, Jan 23 '19 at 15:51
The line that is in the comment.... That line does not keep running. You need to set it. — epascarello, Jan 23 '19 at 16:10
That line is not my question, but why the mydiv's height does not change and how to fix it. — M. Farrokhi D. G., Jan 23 '19 at 16:13
@epascarello I don't know why, but it works! Thanks a lot! It seems that the commands "xhttp.open = ..." and "xhttp.send = ...", and then "document.title = ..." run before the page.html loads completely. — M. Farrokhi D. G., Jan 23 '19 at 19:38
https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron — epascarello, Jan 23 '19 at 20:03

score 0 · Answer 1 · answered Jun 10 '20 at 04:58

0

After using ".innerHTML" you may have to force-reset the height like this:

document.getElementById("mydiv").style.height = ""

answered Jun 10 '20 at 04:58

Josh Wortman

99
1
4

score 0 · Answer 2 · answered May 23 '23 at 13:45

0

Try to set the fit-content value to height property on "mydiv".

#mydiv {
height: fit-content;
}

answered May 23 '23 at 13:45

Gillian Delvigne

1
2

Element height does not change after updating innerHTML with XML HttpRequest

2 Answers2