Кнопка не будет перенаправлена ​​на указанную html страницу в location.href - PullRequest
Новая
       10

Кнопка не будет перенаправлена ​​на указанную html страницу в location.href

0 голосов
/ 23 января 2020

Я не могу перенаправить на следующую страницу. Пожалуйста, помогите мне. У меня есть проект, который должен быть готов завтра. Я пытался больше пяти часов. Пожалуйста, помогите мне. Я умоляю вас, ребята. Я не знаю, что я делаю не так. Я очень новичок в 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>

Ответы [ 2 ]

0 голосов
/ 23 января 2020

1) в разделе заголовка есть тег одиночного закрытия скрипта.

2) закрывающий заголовок и теги div перед .lessons находятся в обратном порядке

3) Вот скрипка, которая, кажется, работает. Кнопка переходит на 404 только потому, что уроки. html здесь не существует.

Я также добавил sla sh для относительного пути. Я предполагаю, что вы, вероятно, работаете из одного каталога root, учитывая, что это учебник, но я могу ошибаться там. 

location.href = "/lessons.html";

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

0 голосов
/ 23 января 2020

Ваш HTML довольно уродливый, некоторые открывающие теги нигде не закрыты, закрывающие теги не имеют совпадающих тегов и т. Д. c ... Это требует некоторой очистки.

Также, если этот код Javascript находится во внешнем файле, убедитесь, что он заключен в событие onload (убедитесь, что все элементы HTML действительно загружены перед вызовом document.getElementById). Наконец, обратите внимание на точку с запятой. Вам следует ставить точку с запятой после оператора, а не после окончания функции }!

Примечание: зачем заново изобретать колесо, если вы можете просто использовать якорный тег (<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>
...