Hugo新手集成JS弹窗：无法调用或修改HTML/CSS问题求助

核心问题1：按钮点击事件未正确调用函数 #

你的HTML按钮代码里，onclick属性写的是openPopup，这只是引用了函数名，并没有执行函数。点击按钮时不会触发openPopup函数，这就是为什么函数内部的console.log('Hello?')没有输出的原因。

修改方法：
把按钮的onclick改为openPopup()，确保点击时执行函数：

<button onclick="openPopup()">OPEN</button>

潜在问题2：DOM加载顺序导致元素获取失败 #

如果你的脚本是在<head>中加载，或者在.tryme元素之前加载，那么document.getElementsByClassName('tryme')[0]可能会返回null——因为此时DOM还没渲染出这个元素，后续修改样式自然无效。

解决方法：

• 把脚本放在</body>标签的上方，确保DOM所有元素都已加载完成后再执行脚本：

  <!-- 其他HTML内容 -->
  <script>
    // 你的JS代码
  </script>
  </body>
  

• 或者用DOMContentLoaded事件包裹代码，确保DOM就绪后再执行：

  document.addEventListener('DOMContentLoaded', function() {
    console.log('Am here?');
  
    const popup = document.getElementsByClassName('tryme')[0];
    function openPopup(){
      popup.style.display = 'block';
      console.log('Hello?');
    }
  
    function hello(){
      for (let i = 0; i < 50; i++) {
        console.log(i);
      }
    }  
    hello()
  
    console.log('Hello?');
  });
  

额外优化：避免内联事件绑定（可选） #

内联onclick虽然简单，但不利于代码维护，推荐用事件监听绑定点击事件：

// 在DOM就绪后执行
document.addEventListener('DOMContentLoaded', function() {
  const popup = document.querySelector('.tryme');
  const openBtn = document.querySelector('button');
  
  function openPopup(){
    popup.style.display = 'block';
    console.log('Hello?');
  }

  openBtn.addEventListener('click', openPopup);
  
  // 其他代码...
});

同时移除按钮的内联onclick属性：

<button>OPEN</button>

内容的提问来源于stack exchange，提问作者Philip Markert