为什么这个 javascript 代码在 stackoverflow 上有效，但在我的 html 文件中却不起作用？

Question

javascript菜鸟，我有下面的泡菜。

我正在尝试制作可调整大小的 div，我发现了这段代码：

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>

我的文件如下所示：

<!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>

我正在使用 XAMPP 本地主机和 Chrome。请帮助我！

Answer 1

将 <script>....</script> 块代码移动到 <body> 的末尾。像这样：

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

它应该有效

有关此方法为何有效的解释，请参见此处： Where should I put <script> tags in HTML markup?

为什么这个 javascript 代码在 stackoverflow 上有效，但在我的 html 文件中却不起作用？

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

html

javascript

css

localhost

resizable