Why does this javascript code work on stackoverflow, but in my html file it doesn't?

Question

javascript noob here, I have the following pickle.

I'm trying to make a resizable div and I found this code:

var m_pos;

function resize(event) {
  var parent = resize_el.parentNode;
  var dx = m_pos - event.x;
  m_pos = event.x;
  parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}
var resize_el = document.getElementById("resize");
if (resize_el) {
  resize_el.addEventListener("mousedown", function(event) {
    m_pos = event.x;
    document.addEventListener("mousemove", resize, false);
  }, false);
}
document.addEventListener("mouseup", function() {
  document.removeEventListener("mousemove", resize, false);
}, false);

#update_panel {
  position: fixed;
  min-width: 420px;
  padding-left: 4px;
  height: 100%;
  top: 0%;
  right: 0;
  background-color: #f0f0f0;
}

#resize {
  background-color: #ccc;
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="update_panel">
    <div id="resize"></div>
  </div>
</body>

</html>

My file looks like this:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var m_pos;
        function resize(event) {
        var parent = resize_el.parentNode;
        var dx = m_pos - event.x;
        m_pos = event.x;
        parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
        }
        var resize_el = document.getElementById("resize");
        if (resize_el) {
        resize_el.addEventListener("mousedown", function(event) {
            m_pos = event.x;
            document.addEventListener("mousemove", resize, false);
        }, false);
        }
        document.addEventListener("mouseup", function() {
        document.removeEventListener("mousemove", resize, false);
        }, false);
    </script>
    <style>
        #update_panel {
            position: fixed;
            min-width: 420px;
            padding-left: 4px;
            height: 100%;
            top: 0%;
            right: 0;
            background-color: #f0f0f0;
        }
        #resize {
            background-color: #ccc;
            position: absolute;
            left: 0;
            width: 4px;
            height: 100%;
            cursor: w-resize;
        }
    </style>
</head>
<body>
    <div id="update_panel">
        <div id="resize"></div>
    </div>
</body>
</html>

I'm using XAMPP localhost with Chrome. Please help me!

Related: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Jonathan Lonowski, Sep 24 '20 at 14:46

score 1 · Accepted Answer · edited Sep 24 '20 at 14:51

1

Move <script>....</script> block code to the end of <body>. Like this:

<body>
  <div>
    ...
  </div>
  <script>
    ...
  </script>
</body>

it should work

For an explanation of why this works see here: Where should I put <script> tags in HTML markup?

edited Sep 24 '20 at 14:51

DonCarleone

258
1
9

answered Sep 24 '20 at 14:43

Qual09

74
1
6

1

Thank you very much, it works! I'm gonna read this now. – dasmanfred Sep 25 '20 at 06:06

Why does this javascript code work on stackoverflow, but in my html file it doesn't?

1 Answers1