单击按钮后无法加载 game.html答案

【问题标题】：unable to load game.html after clicking on the buttons单击按钮后无法加载 game.html
【发布时间】：2018-02-22 14:22:42
【问题描述】：

为什么单击按钮后我没有被定向到 game.html？这文件结构为 server/server.js、public/index.html、public/game.html。 index.html

 < !DOCTYPE html>

 <html>

 <title>QUIZ GAME</title>


  <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

 <body>

 <!-- Navbar (sit on top) -->

<div class="w3-top">

<div class="w3-bar w3-white w3-wide w3-padding w3-card">

<a href="#home" class="w3-bar-item w3-button"><b>QUIZ</b>Book</a>

<!-- Float links to the right. Hide them on small screens -->

<div class="w3-right w3-hide-small">

<a href="#projects" class="w3-bar-item w3-button">CATEGORIES</a>

<a href="#about" class="w3-bar-item w3-button">About</a>

<a href="#contact" class="w3-bar-item w3-button">Contact</a>

</div>

</div>

</div>

 <!-- Header -->


 <header class="w3-display-container w3-content w3-wide" style="max-

  width:1500px;" id="home">

 <img class="w3-image" src="pics/quiz.jpg" alt="Architecture" width="1500" 

 height="800">

 <div class="w3-display-middle w3-margin-top w3-center">

 <h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-

  opacity-min"><b>QUIZ</b></span> <span class="w3-hide-small w3-text-light-

  grey">Book</span></h1>


</div>

</header>

 <!-- Page content -->

 <div class="w3-content w3-padding" style="max-width:1564px">

 <!-- Project Section -->

 <div class="w3-container w3-padding-32" id="projects">

 <h3 class="w3-border-bottom w3-border-light-grey w3-padding-

 16">CATEGORIES</h3>

 </div>

 <div class="w3-row-padding">

 <div class="w3-col l3 m6 w3-margin-bottom">

 <div class="w3-display-container">

  <button class="w3-button w3-hover-black" ><img src="pics/GK.jpg" 

  alt="House" style="width:100%"><div class="content">

  <h3>GENERAL KNOWLEDGE</h3></div></button>

  </div>

 </div>

 <div class="w3-col l3 m6 w3-margin-bottom">

 <div class="w3-display-container">

   <button class="w3-button w3-hover-black"><img src="pics/maths_school.jpg" 


 alt="House" style="width:100%"> </button>

  </div>

 </div>

 <div class="w3-col l3 m6 w3-margin-bottom">

  <div class="w3-display-container">

    <button class="w3-button w3-hover-black"><img src="pics/bollywood.jpg" 

  alt="House" style="width:100%"> </button>



  </div>

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

  <div class="w3-display-container">

        <button class="w3-button w3-hover-black"><img 

    src="pics/hollywood.jpg" alt="House" style="width:100%"> </button>



  </div>

 </div>

 </div>



<div class="w3-row-padding">

 <div class="w3-col l3 m6 w3-margin-bottom">

  <div class="w3-display-container">

        <button class="w3-button w3-hover-black"><img src="pics/cricket.jpg" 

       alt="House" style="width:99%"> </button>


  </div>

 </div>

 <div class="w3-col l3 m6 w3-margin-bottom">

 <div class="w3-display-container">

  <button class="w3-button w3-hover-black"> <img src="pics/football.jpg" 

  alt="House" style="width:99%"></button>

  </div>

 </div>

 <div class="w3-col l3 m6 w3-margin-bottom">

 <div class="w3-display-container">

 <button class="w3-button w3-hover-black"> <img src="pics/sports.jpg" 

 alt="House" style="width:99%"> </button>

  </div>

 </div>

 <div class="w3-col l3 m6 w3-margin-bottom">

  <div class="w3-display-container">

 <button class="w3-button w3-hover-black"> <img src="pics/science.png" 

alt="House" style="width:99%"> </button>

  </div>

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

 <div class="w3-display-container">

  <button class="w3-button w3-hover-black"><img src="pics/history.jpg" 

  alt="House" style="width:99%"> </button>

  </div>

  </div>

  <div class="w3-col l3 m6 w3-margin-bottom">

  <div class="w3-display-container">

  <button class="w3-button w3-hover-black"> <img src="pics/music.png" 

  alt="House" style="width:99%"> </button>

  </div>

 </div>

 <div class="w3-col l3 m6 w3-margin-bottom">

 <div class="w3-display-container">

  <button class="w3-button w3-hover-black">  <img src="pics/tennis.jpg" 

 alt="House" style="width:99%"> </button>

  </div>

 </div>

 </div>


 <!-- About Section -->

<div class="w3-container w3-padding-32" id="about">

<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">About</h3>

</div>



 <!-- Contact Section -->

 <div class="w3-container w3-padding-32" id="contact">

 <h3 class="w3-border-bottom w3-border-light-grey w3-padding-

 16">Contact</h3>

 <p>Lets get in touch and talk about your and our next project.</p>

 <form action="/" target="_blank">

  <input class="w3-input" type="text" placeholder="Name" required 

 name="Name">

 <input class="w3-input w3-section" type="text" placeholder="Email" required 

name="Email">

 <input class="w3-input w3-section" type="text" placeholder="Subject" 

required name="Subject">

  <input class="w3-input w3-section" type="text" placeholder="Comment" 

 required name="Comment">

 <button class="w3-button w3-black w3-section" type="submit">

   <i class="fa fa-paper-plane"></i> SEND MESSAGE

</button>

</div>

</div>

<script>

document.getElementsByClassName('w3-button w3-hover-black').onclick = 

function(){

    window.location.href = "https://localhost:3000/game.html";

}

</html>



 in game.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>QUIZ book</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>

<div id = "gameDiv"></div>

 <script src = "/socket.io/socket.io.js"></script>

 <script src = "lib/phaser.min.js"></script>

  <script src = "main.js"></script>

 <script src = "player.js"></script>

 </body>

</html>


in server/server.js

var express = require('express');

 var socketIo = require('socket.io');

var path = require('path');

var http = require('http');

var app = express();

const port = process.env.PORT ||3000 ;

const pathjoin = path.join(__dirname, '../public');

 const pathjoin1 = path.join(__dirname,'../public/game.html');

 var server = http.createServer(app);

 app.use(express.static(pathjoin));

 app.use('/game.html',express.static(pathjoin1));

 var io = socketIo(server);

 io.on('connection',(socket)=>{

 console.log('user connected ' + socket.id);

  });





server.listen(port,()=>{

console.log('server started');

});

【问题讨论】：

请提供完整的错误信息。导致错误消息的确切代码，也许也可以添加一个实际问题。
实际上没有显示错误。 .它只是当我点击按钮时我没有被定向到游戏/html。也许我不知道实现！帮帮我！
您发布整个页面是因为您有 1 个按钮的问题。只需在jsfiddle.net 中做一个小例子就可以向我们展示问题所在。仅添加问题所涉及的所需的 javascipt/css/html。

标签： javascript html node.js express socket.io

【解决方案1】：

首先，这不是在这里提问的正确方法，也请阅读How-To-Ask，然后document.getElementsByClassName返回一个数组，所以你必须通过它或使用jQuery，例如：

var elements = document.getElementsByClassName('w3-button w3-hover-black'); 
for (var i = 0; i < elements.length; i++) {
   elements[i].addEventListener("click", function(){
      window.location.href = "https://localhost:3000/game.html";
   });
}

【讨论】：

我很抱歉我问的方式。好吧，我在点击按钮后被定向到 game.html，但在被定向到 localhost:3000/game.html 后它没有加载页面；它说：这个站点无法提供安全连接 localhost 发送了一个无效响应
@rohan 告诉我你的服务器，并检查 http 吗？除非你的服务器支持 https，否则我没有投反对票，但我认为问题出在你的提问方式上，（只是你知道）......
即使在将其编辑为 http 后也不起作用！它是一个快递服务器。你可以看看我帖子里的 server/server.js 代码。
这次有什么反应？
对我的沮丧没有太大反应！它显示了同样的事情：本地主机发送了一个无效的响应。

【解决方案2】：

问题是getElementSbyClassName 返回具有此类名称的所有元素的数组，例如在第一个元素上具有 OnClick 功能：

document.getElementsByClassName('w3-button w3-hover-black')[0].onclick =

您必须像这样遍历它们并为每个附加一个处理程序：

var elts = getElementsByClassName('w3-button w3-hover-black');
for( var i=0,il = elts.length; i< il; i ++ ){
 elts[i].onclick = 

function(){
//your code..
}

【讨论】：

我知道 ^^ 我问投反对票的人是否看起来像这个
@LeoR。我也有一些这样的。难道是因为他问的方式？我们必须告诉他？？？
好吧，我在点击按钮后被定向到 game.html，但在被定向到 localhost:3000/game.html 后它没有加载页面；它说：这个网站不能提供安全的连接 localhost 发送了无效响应。