我正在嘗試使用 js 更改按鈕的文本，但它不起作用（html dom）（給出非常基本的答案）

Question

我只是在試驗和制作一個小游戲，但在此之前我為用戶制作了按鈕來選擇角色，當他們將鼠標懸停在角色上時，他們會看到關於它的簡介，我是一個新的編碼員，所以不知道 innerhtml 的概念但是我用 ws3schools 來使用它，但它仍然沒有用

我嘗試使用 innerhtml 但這里不會顯示的文本是 html 的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="main.js"></script>
    <title>Tomoko Game</title>
</head>
<body>
    <h1 class="header">Choose your Tomoko </h1>
    <button onclick="NewPagePo()" onfocus="AddPo()" form="ReButton" id = "ButtonRehanPo">Tomoko Polite <img id="TomoPicL" src="C:\Users\Rehan Muhammad Ali\.vscode\Tomoko\Photos\20221109_054642.jpg" alt="Dog"></button>
    <button onclick="NewPageDa()" onfocus="AddDa()" form="ReButton" id = "ButtonRehanDa">Tomoko Dangerous <img id="TomoPicR" src="C:\Users\Rehan Muhammad Ali\.vscode\Tomoko\Photos\CIMG0093.JPG" alt="Dog"></button>
    <button onclick="NewPageAll()" onfocus="AddAll()" form="ReButton" id = "ButtonRehanAll">Tomoko All-Rounder <img id="TomoPicM" src="C:\Users\Rehan Muhammad Ali\.vscode\Tomoko\Photos\20211214_192451.jpg" alt="Dog"></button>
    <p id="p1">Hi</p>
</body>
</html>

在按鈕上它說 onfocus="AddAll()" 那是我在文本中放置的 js 函數

function NewPagePo() {
  open("indexPo.html", "_self");
}

function NewPageAll() {
  open("indexAll.html", "_self");
}

function NewPageDa() {
  open("indexDa.html", "_self");
}

function Back() {
  open("index.html", "_self");
}

function AddAll() {
  document.getElementById("ButtonRehanAll").innerHTML = "Test1";
}

基本上就是這樣。 如果你想審查 css 並看看它是否可以改進，我洗耳恭聽 css：

/*                                    CSS Style Sheet                                 */


/* Buttons */

#ButtonRehanDa {
  /* Standard button code */
  border: 10;
  border-color: aliceblue;
  padding: 10px;
  font: 1em sans-serif;
  font-size: 10;
  font-weight: 600;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: black;
  background-color: wheat;
  border-radius: 25px;
  width: 300px;
  height: 100px;
  float: left;
  transition: duration 1.3s;
  margin-left: 0.60in;
  image-resolution: 0;
  text-align: center;
  transition-property: all;
  transition-duration: 1s;
}
#ButtonRehanAll {
  /* Standard button code */
  border: 10;
  border-color: aliceblue;
  padding: 10px;
  font: 1em sans-serif;
  font-size: 10;
  font-weight: 600;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: black;
  background-color: wheat;
  border-radius: 25px;
  width: 300px;
  height: 100px;
  float: left;
  transition: duration 1.3s;
  margin-left: 0.60in;
  image-resolution: 0;
  text-align: center;
  transition-property: all;
  transition-duration: 1s;
}
#ButtonRehanPo {
  /* Standard button code */
  border: 10;
  border-color: aliceblue;
  padding: 10px;
  font: 1em sans-serif;
  font-size: 10;
  font-weight: 600;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: black;
  background-color: wheat;
  border-radius: 25px;
  width: 300px;
  height: 100px;
  float: left;
  transition: duration 1.3s;
  margin-left: 0.60in;
  image-resolution: 0;
  text-align: center;
  transition-property: all;
  transition-duration: 1s;
  /* Additional */
  margin-left: 125px;
}
#Back {
  border: 10;
  border-color: aliceblue;
  padding: 10px;
  font: 1em sans-serif;
  font-size: 10;
  font-weight: 600;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: black;
  background-color: wheat;
  border-radius: 25px;
  width: 20%;
  height: 90%;
  float: left;
  font-size: 1.19rem;
  transition-property: all;
  transition-duration: 1s;
}


/* Images */


#TomoPicR {
  width: 50px;
  height: 50px;
  float: right;
  border-radius: 10%;
}
#TomoPicL {
  width: 50px;
  height: 50px;
  float: left;
  border-radius: 10%;
}
#TomoPicM {
  width: 50px;
  height: 50px;
  float: right;
  border-radius: 10%;
}
#imgDesign {
  height: 10%;
  width: 10%;
  border: 6px solid black;
}


/* Hover */

#ButtonRehanAll:hover {
  width: 400px;
  height: 200px;
  border-color: rgb(0, 135, 253);
  font-weight: 700;
  background-color: rgb(240, 194, 107);
}
#ButtonRehanPo:hover {
  width: 400px;
  height: 200px;
  border-color: rgb(0, 135, 253);
  font-weight: 700;
  background-color: rgb(240, 194, 107);
}
#ButtonRehanDa:hover {
  width: 400px;
  height: 200px;
  border-color: rgb(0, 135, 253);
  font-weight: 700;
  background-color: rgb(240, 194, 107);
}
#Back:hover {
  border: 10;
  border-color: rgb(0, 135, 253);
  padding: 10px;
  font: 1em sans-serif;
  font-size: 10;
  font-weight: 700;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: black;
  background-color: rgb(240, 194, 107);
  border-radius: 30px;
  width: 20.5%;
  height: 90.5%;
  float: left;
  font-size: 1.19rem;
}

/* Other */

.header {
  font-family: "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif;
  text-align: center;
  text-decoration: underline;
}
.H1 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 250%;
  text-align: center;
}
body {
  background-color: antiquewhite;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

Answer 1

單擊（或使用鍵盤導航到）后按鈕將聚焦。 您正在尋找 'onmouseover' 事件，而不是按鈕上的 'onfocus' 事件。

也就是說，<button> 元素實際上只用於頁內交互，而不是導航。 如果您導航到其他頁面，您應該使用 <a> 元素。

我正在嘗試使用 js 更改按鈕的文本，但它不起作用（html dom）（給出非常基本的答案）

問題描述

1 個解決方案

解決方案1
0 已采納 2022-12-13 12:21:22

我正在嘗試使用 js 更改按鈕的文本，但它不起作用（html dom）（給出非常基本的答案）

問題描述

1 個解決方案

解決方案1 0 已采納 2022-12-13 12:21:22

解決方案1
0 已采納 2022-12-13 12:21:22