按钮不会重定向到 location.href 中的给定 html 页面答案

【问题标题】：Button won't redirect to given html page in location.href按钮不会重定向到 location.href 中的给定 html 页面
【发布时间】：2020-05-10 00:49:07
【问题描述】：

我无法重定向到下一页。请帮我。我有一个项目明天到期。我已经尝试了五个多小时。请帮我。我求求你们了。我不知道我做错了什么。我对 Javascript 很陌生。

请告诉我我做错了什么

document.getElementById("one").onclick = function() {
  location.href = "lessons.html"
};

<!DOCTYPE html>
<html>

<head>
  <title> MaxFluency Tutorials Page</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="tutorial.css">


  </script>

</head>

<body>
  <header>
    <div class="topbar">
      <center>
        <p> Tutorials</p>
      </center>
  </header>
  </div>

  <div class="lessons">
    <center>
      <button class=les id=one type="button"> <h3> Lesson 1: </h3> Nature of Communication </button>
      <button class=les id="2nd"> <h3>Lesson 2:</h3></button>
      <button class="les" id="3rd"> <h3>Lesson 3:</h3></button>
    </center>
  </div>

  <div class="nav">

    <center><button class="loc"> Home</button>
      <button class="loc"> Highscores </button>
      <button class="loc"> Support us!</button>
    </center>

  </div>

  <script type="text/Javascript" src="tutorials.js">

  </script>
</body>

</html>

【问题讨论】：

您有一些格式错误的 html。例如class=les id=one 应该是class="les" id="one"。
@Gavin 不包含特殊字符的属性值不需要引号。
课程.html 的路径是什么？该网站的网址是什么？这是做什么的：
你只是有很多 html 语法错误需要修复。
我将 tutorials.js 作为 html 的外部文件。 Lessons.html 是它应该重定向到的地方

标签： javascript html button href

【解决方案1】：

您的 HTML 格式不正确，一些开始标签没有在任何地方关闭，结束标签没有任何匹配的标签，等等......这需要整理一下。

此外，如果此 Javascript 代码位于外部文件中，请确保将其包装在 onload 事件中（确保在调用 document.getElementById 之前实际加载了所有 HTML 元素）。最后，注意分号的位置。您应该将分号放在语句之后，而不是函数结尾 }!

旁注：当您可以简单地使用锚标记 (<a>) 进行重定向时，为什么要重新发明轮子？

onload = function() {
  document.getElementById("one").onclick = function () {
    console.log("clicked!");
    location.href = "lessons.html";
  }
}

<!DOCTYPE html>
<html>
    <head>
        <title> MaxFluency Tutorials Page</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="tutorial.css">

    </head>
  <body>
  <header>
    <div class="topbar">
      <center> <p> Tutorials</p> </center> 
     </div>
  </header> <!-- this closing tag was missing -->

    <div class="lessons">
      <center>    
        <button class=les id=one type="button" > <h3> Lesson 1: </h3> Nature of Communication </button>
         <button class=les id="2nd"> <h3>Lesson 2:</h3></button>
         <button class="les" id="3rd"> <h3>Lesson 3:</h3></button>
       </center> 
    </div> 

   <div class="nav">

         <center><button class="loc"> Home</button>
           <button class="loc"> Highscores </button>
               <button class="loc"> Support us!</button>
           </center> 

   </div>  

     <script type="text/Javascript" src="tutorials.js"></script>
    </body>
</html>

【讨论】：

@Yumolb 请注意，我假设 Javascript 代码（上图）存在于 JS 文件中。将 Javascript 代码添加到您的 JS 文件之一，例如tutorials.js

【解决方案2】：

1) head 部分有一个单独的结束脚本标记。

2) .lessons 之前的结束标题和 div 标记顺序相反

3) 这是一个似乎正在工作的小提琴。按钮进入 404 只是因为这里不存在课程。

我还为相对路径添加了斜线。我假设您可能正在从单个根目录工作，因为它是一个教程，但我可能错了。

location.href = "/lessons.html";

https://jsfiddle.net/y7txje5c/1/

【讨论】：

lessons.html 是我创建的一个 html 文件，是的。好吧，我从 Visual Studio Code 的早期答案中复制了那里写的代码，但它不起作用。当您尝试它并且它起作用时，我感到很惊讶。我不知道为什么会这样。我现在因紧张而无法呼吸。
只是出于好奇...您的文件结构是什么样的？你的js文件还在导入吗？
好吧，我将我的 js 文件从 VS 代码保存到我的笔记文件夹，但我不完全知道导入是如何工作的？嗯，我把脚本标签作为正文的最后一个标签？
所以假设你有一个 notes 文件夹，你需要将它包含在你的 src 属性中。
事实证明它有效。但是当我从 Visual Studio 代码中保存它时，它没有。我不知道为什么