HTML 頁面之間的鏈接無法正常工作

Question

我正在 p5.JS 網絡編輯器中創建一個項目。 到目前為止，它有一個開始屏幕，但我想使用按鈕邊界作為彼此的鏈接為登錄和帳戶創建創建單獨的 HTML； 我不知道該怎么做，所以現在我只是使用常規鏈接。 我想使用數據庫來存儲這些詳細信息（我想通過 phpMyAdmin 使用 XAMPP 來使用 MySQL 數據庫，但如果有更好的方法來使用 p5.js WEB EDITOR 做到這一點，請告訴我！）

我正在測試 index.html 到 signup.html 之間的鏈接（其中有要測試的草圖 page.js）這個注冊鏈接是我希望用戶為將被放入數據庫的帳戶創建詳細信息的地方. 單擊注冊時，鏈接似乎正確加載了 HTML，但在重定向回開始屏幕 (index.html) 時，輸入框和鏈接位置錯誤，無法播放 gif。 無論如何有人可以幫助我嗎？ 我對 p5.js 或 HTML 沒有太多經驗，而且我也剛開始使用 PHP 和數據庫，因此將不勝感激！ 謝謝。

--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>

--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>

--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){
    
    
  }
}

--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);
}

--style.css 的代碼--

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

--style2.css的代碼--

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

Answer 1

好的，我發現這只是 p5.js 網絡編輯器的一個問題（事實證明它在這方面不是很好）。 我在 Visual Studio Code（使用 p5.vscode 擴展名）中創建了完全相同的項目（而不是使用相同的 styles.css），並且鏈接工作正常，所有輸入框都已就位，gif 播放正確。 我的錯誤哈哈。

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