HTML 页面之间的链接无法正常工作

Question

I am making a project in the p5.JS web editor.我正在 p5.JS 网络编辑器中创建一个项目。 So far it has a start screen but I want to create separate HTMLs for the login and account creation using the button boundaries as links to each other;到目前为止，它有一个开始屏幕，但我想使用按钮边界作为彼此的链接为登录和帐户创建创建单独的 HTML； I don't know how to do that, so for now I am just using regular links.我不知道该怎么做，所以现在我只是使用常规链接。 I want to use a database to store these details (I want to use a MySQL database through phpMyAdmin by using XAMPP, but if there is a better way to do it with the p5.js WEB EDITOR please let me know!)我想使用数据库来存储这些详细信息（我想通过 phpMyAdmin 使用 XAMPP 来使用 MySQL 数据库，但如果有更好的方法来使用 p5.js WEB EDITOR 做到这一点，请告诉我！）

I am testing the link between the index.html to the signup.html (Which has the sketch page.js to test) This link to the signup is where I want the users to create details for an account which will be put into the database.我正在测试 index.html 到 signup.html 之间的链接（其中有要测试的草图 page.js）这个注册链接是我希望用户为将被放入数据库的帐户创建详细信息的地方. On click to the sign up the link appears to load the HTML correctly, but when redirecting back to the start screen (index.html) input boxes and links are mispositioned and the gif doesn't play.单击注册时，链接似乎正确加载了 HTML，但在重定向回开始屏幕 (index.html) 时，输入框和链接位置错误，无法播放 gif。 Is there anyway somebody could help me with this?无论如何有人可以帮助我吗？ I don't have too much experience with p5.js or HTML and I am just starting out with PHP and databases too, so any help would be greatly appreciated!我对 p5.js 或 HTML 没有太多经验，而且我也刚开始使用 PHP 和数据库，因此将不胜感激！ Thanks.谢谢。

--Code for index.html-- --index.html的代码--

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

--Code for signup.html-- --signup.html 代码--

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="style2.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="page.js"></script>
  </body>
</html>

--Code for sketch.js-- Note: You might want to ignore what I was doing with the input boxes and empty functions --sketch.js 的代码-- 注意：您可能想忽略我对输入框和空函数所做的操作

let MENU=0; //Sets menu to 0
let img; //defines image    
let gif_createImg; //defines gif
var fade = 0;
var fadeSpeed = 1.0;

let url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTKHB57FTYof4JxLnJPHb-FH5jh3wjuC1jRXWoX3ytUfENYAbMz1IqBZcmM0IQ90drNS__NOWkgSjrG/pub?gid=0&single=true&output=csv"





function preload(){
  StartImg = loadImage('Images and GIFS/Species sandbox img.png'); //takes start screen image from assests
  LoginImg = loadImage('Images and GIFS/Login img.png ')
  dnaGif = loadImage('Images and GIFS/dna2.gif') //takes start screen gif from assets
  CreateAccountImg = loadImage('Images and GIFS/Create new account img.png')
}


function setup() {
  createCanvas(1280, 720); //creates the canvas for which everything else will be drawn on
  dnaGif.delay(40)
  let a = createA('signup.html', 'this is a link');
  a.position(0, 0);

}



function draw() {
  if (MENU == 0) {
    drawStartScreen();
  } else if (MENU == 1) {
    drawLoginScreen();
  } else if (MENU == 2) {
    drawAccountCreation();
  }else if (MENU == 3) {
    drawHTU();
  }
  
}



function drawStartScreen(){
  console.log('Start')
  background(255,255,245) //creates background with 3 arguments being values of colour: R, G and B
//  print(mouseX,mouseY) //prints location of mouse in the program
  image(StartImg,0,0, width,height); //creates the image for the start screen as sets it to match the size of the canvas 
  image(dnaGif,360,200) //creates gif and sets location (X,Y) in the program

}  
  


function drawAccountCreation(){
  console.log('Account creation')
  background(255, 255, 245)
  image(CreateAccountImg,0,0, width,height)
  textSize(20)
  text('Right-Click to return to the startscreen', 455, 693)
  if (mouseButton == RIGHT) {
    MENU = 0
    currentCreateUsername.remove();
    currentCreateUsername = undefined;
    currentCreatePassword.remove();
    currentCreatePassword = undefined;
    currentConfirmUsername.remove();
    currentConfirmUsername = undefined;
    currentConfirmPassword.remove();
    currentConfirmassword = undefined;
    }
   
}  



function inputUsername() {
  let input1 = createInput();
  input1.position(474, 130);
  input1.size(500, 70);
  input1.style('font-size: 30px')
  return input1;
}
 


function inputPassword(){
  let input2 = createInput();
  input2.position(474, 250);
  input2.size(500, 70);
  input2.style('font-size: 30px')
  return input2;
}



function inputCreateUsername(){
  let inputA = createInput();
  inputA.position(474, 129);
  inputA.size(500, 70);
  inputA.style('font-size: 30px')
  return inputA;
}



function inputCreatePassword(){
  let inputB = createInput();
  inputB.position(474, 220);
  inputB.size(500, 70);
  inputB.style('font-size: 30px')
  return inputB;
}



function inputConfirmUsername(){
  let inputC = createInput();
  inputC.position(474, 312);
  inputC.size(500, 70);
  inputC.style('font-size: 30px')
  return inputC;
}




function inputConfirmPassword(){
  let inputD = createInput();
  inputD.position(474, 402);
  inputD.size(500, 70);
  inputD.style('font-size: 30px')
  return inputD;
}




let currentInputUsername;

let currentInputPassword;

let currentCreateUsername;

let currentCreatePassword;

let currentConfirmUsername;

let currentConfirmPassword;

function mouseClicked(){
  if (MENU == 0) { 
    if (mouseY < 582 && mouseY > 527) {  
      if (mouseX < 527 && mouseX > 328) { 
        MENU = 1
        currentInputUsername= inputUsername();  
        currentInputPassword = inputPassword();
      } 
      if (mouseX < 900 && mouseX > 706) { 
        MENU = 2
        currentCreateUsername = inputCreateUsername();
        currentCreatePassword = inputCreatePassword();
        currentConfirmUsername = inputConfirmUsername();
        currentConfirmPassword = inputConfirmPassword();
        
        
      }
  }
  }
}



function drawHTU(){
  console.log('How-to-use')
  background(255, 0, 255)
  textSize(20)
  text('How to use', 600, 50)
  if (mouseButton == RIGHT) {
    MENU = 2
  }
}

  

function drawLoginScreen(){
//  print(mouseX,mouseY) 
  console.log('Login')
  background(255, 255, 245)
  fill(0) //colour filled in is set to black
  image(LoginImg,0,0, width,height);
  textSize(20)
  text('Right-Click to return to the start screen', 455, 693) //text and location in program
  
  
  if (mouseButton == RIGHT ){
    MENU = 0  //changes menu back to start screen if right-click is pressed
    currentInputUsername.remove();
    currentInputUsername = undefined;
    currentInputPassword.remove();
    currentInputPassword = undefined;
    }
  if (mouseIsPressed){
    if (mouseButton === LEFT && mouseY < 601 && mouseY > 547 && mouseX < 734 && mouseX > 535){ //Checks if mouse if pressed and is within boundary
    MENU = 3
    currentInputUsername.remove();
    currentInputUsername = undefined;
    currentInputPassword.remove();
    currentInputPassword = undefined;
    }
  }
}

function login(){
  if (MENU == 1){
    
    
  }
}

--Code for page.js-- --page.js 代码--

let link;

function setup() {
  createCanvas(windowWidth, windowHeight);
  link = createA('index.html', 'this is a link')
  link.position(10,20);
}

function draw() {
  background(220);
}

--Code for style.css-- --style.css 的代码--

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

--Code for style2.css-- --style2.css的代码--

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

Answer 1

Ok I found out it was just a problem with the p5.js web editor (turns out it isn't very good when it comes to this).好的，我发现这只是 p5.js 网络编辑器的一个问题（事实证明它在这方面不是很好）。 I created the project exactly the same (Instead using the same styles.css) in Visual Studio Code (using the p5.vscode extension) and the links worked correctly, all input boxes in place and gifs playing correctly.我在 Visual Studio Code（使用 p5.vscode 扩展名）中创建了完全相同的项目（而不是使用相同的 styles.css），并且链接工作正常，所有输入框都已就位，gif 播放正确。 My mistake lol.我的错误哈哈。

HTML 页面之间的链接无法正常工作

问题描述

1 个解决方案

解决方案1
0 2021-10-31 17:46:14

HTML 页面之间的链接无法正常工作

问题描述

1 个解决方案

解决方案1 0 2021-10-31 17:46:14

解决方案1
0 2021-10-31 17:46:14