我只是在做一个小游戏，但在此之前，我为用户制作了按钮来选择角色，当他们悬停在角色上时，他们会看到关于它的生物，我是一个新的编码器，所以不知道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;
}
1条答案
按热度按时间hi3rlvi21#
单击（或使用键盘导航到）按钮后，按钮将获得焦点。您正在查找按钮上的“onmouseover”事件，而不是“onfocus”事件。
也就是说，元素实际上只是用于页面内交互，而不是导航，如果你要导航到其他页面，你应该使用元素。