javascript - 托管站点缺少本地 html 文件中的元素

Question

我正在构建的网站是简单的 html、CSS 和 JavaScript。它在本地文件中按预期工作(在 chrome 中打开 html 文件)。然而，一旦我托管它，它就会丢失奇怪的小块。

例如，在我的页面中央，我有一个 CSS 文件中指定的大 div(400 像素高)。所以我检查了我的 CSS 文件以确保它已被托管，确实如此。不仅如此，它还在定义其他元素的 CSS 属性。托管网站以某种方式忽略了我的 div 元素。 (见下文)

    #map {
    height: 400px;  /* this is displayed */
    width: 70%; 
   }
   #myElement {  /* this is not */
    background: silver;
    height: 300px;
    text-align: center;
    font: 30px/300px Helvetica, Arial, sans-serif;
  }

示例 2:我创建了一个按钮来激活一个功能。此功能在本地文件上运行良好，但在我的托管文件上似乎消失了。和以前一样的情况，js 文件正在执行它的其他工作，只是不是这个。见下文

    <button onclick="vibrateButton()">Vibrate</button>

    function vibrateButton() {
  navigator.vibrate([500]);
  console.log("vibrated")
}

在控制台中发现错误:Uncaught ReferenceError: vibrateButton is not defined 在 HTMLButtonElement.onclick ((index):73)

我尝试再次保存所有内容并重新上传网站，结果相同。我很茫然。有什么想法吗？

Answer 1

您还没有包含脚本标签。包含它并尝试

<button onclick="vibrateButton()">Vibrate</button>
<script>
function vibrateButton() {
  navigator.vibrate([500]);
  console.log("vibrated")
}
</script>