为什么这个 javascript 代码可以在 stackoverflow 上运行，但在我的 html 文件中却不行？ [复制]答案

【问题标题】：Why does this javascript code work on stackoverflow, but in my html file it doesn't? [duplicate]为什么这个 javascript 代码可以在 stackoverflow 上运行，但在我的 html 文件中却不行？ [复制]
【发布时间】：2020-09-24 14:41:01
【问题描述】：

这里是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>

我在 Chrome 中使用 XAMPP localhost。请帮帮我！

【问题讨论】：

将脚本标签代码放在正文末尾
相关：Why does jQuery or a DOM method such as getElementById not find the element?
“我有以下泡菜”.

标签： javascript html css localhost resizable

【解决方案1】：

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

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

它应该可以工作

有关此功能为何有效的说明，请参见此处： Where should I put <script> tags in HTML markup?

【讨论】：

非常感谢，它有效！我现在要读这个。