javascript - 返回的 JavaScript 值不会在 div 元素内呈现

Question

这是一个基本问题(再次发布，因为在我更新 the question 后它没有重新打开)。但是我在 SO 上找不到任何重复项。

这是我打算在不同页面上的项目中使用的脚本。目的是将 span 元素中显示的默认 ID 覆盖为来自 URL 参数 session_order 的订单号。这不会影响任何东西，只会增强我的项目的用户体验。

scripts.js(在 header 中加载):

function get_url_parameter(url, parameter) {
    var url = new URL(url);
    return url.searchParams.get(parameter);
}

在我的 HTML 模板中，我这样调用函数，

<div onload="this.innerHTML = get_url_parameter(window.location.href, 'session_order');">24</div>

也试过这个，

<div><script type="text/javascript">document.write(get_url_parameter(window.location.href, 'session_order'));</script></div>

呈现页面时，没有任何变化。对于第一种情况，控制台中没有错误或警告。

对于第二种情况，尽管 script.js 在 div 元素之前加载，但控制台记录了一个错误 Uncaught ReferenceError: get_url_parameter is not defined (没有任何错误)。

通常，我会在服务器端使用 Flask 执行此操作，但我正在试用 JavaScript(我是 JavaScript 的新手)，因为它只是一种用户体验增强功能。

我错过了什么？

Answer 1

试试这个:

// This is commented because it can't be tested inside the stackoverflow editor
//const url = window.location.href;
const url = 'https://example.com?session_order=13';

function get_url_parameter(url, parameter) {
    const u = new URL(url);
    return u.searchParams.get(parameter);
}

window.onload = function() {
  const el = document.getElementById('sessionOrder');
  const val = get_url_parameter(url, 'session_order');
  if (val) {
    el.innerHTML = val;
  }
}

<span id="sessionOrder">24</span>

定义获取 URL 参数所需的函数，然后在窗口加载事件中获取 URL 参数并更新元素。