如何使 OnClick 事件为按钮添加边框？
[英]How to make an OnClick event to add a border to a button?
问题描述
嗨，我正在尝试使用 JavaScript、CSS 和 HTML:5 制作 Minecraft 的 2D 版本。 我在构建快捷栏时遇到了问题。 我想在单击按钮时为其应用边框，但出现此异常。
SyntaxError: Unexpected end of input at /:11:143
这是 index.HTML 脚本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>2D Minecraft</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<button class="hotbar1" id="hotbar1" onclick="document.getElementById("hotbar1").style.border: 7.5px solid Gray;"/>
<button class="hotbar2" id="hotbar2"/>
<button class="hotbar3" id="hotbar3"/>
<button class="hotbar4" id="hotbar4"/>
<button class="hotbar5" id="hotbar5"/>
<button class="hotbar6" id="hotbar6"/>
<button class="hotbar7" id="hotbar7"/>
<button class="hotbar8" id="hotbar8"/>
<button class="hotbar9" id="hotbar9"/>
<style>
body{
background: #191919;
}
.hotbar1{
background: White;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 17%;
}
.hotbar2{
background: White;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 24.5%;
}
.hotbar3{
background: White;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 32%;
}
.hotbar4{
background: White;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 39.5%;
}
.hotbar5{
background: White;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 47%;
}
.hotbar6{
background: White;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 54.5%;
}
.hotbar7{
background: White;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 62%;
}
.hotbar8{
background: White;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 69.5%;
}
.hotbar9{
background: White;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 77%;
}
</style>
</body>
</html>
4 个解决方案
解决方案1
1 已采纳 2021-04-26 19:51:18
此行在带引号的字符串中不正确地使用引号和指定样式更改的方式都是错误的：
onclick="document.getElementById("hotbar1").style.border: 7.5px solid Gray;"
它应该是
onclick="document.getElementById('hotbar1').style.border='7.5px solid Gray'";
解决方案2
1 2021-04-26 20:05:21
这会起作用，我已经更新了您按钮的onclick ，只需比较一下，您就会知道这里发生了什么变化。
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>2D Minecraft</title> <link href="style:css" rel="stylesheet" type="text/css" /> <style> body { background; #191919. }:hotbar1 { background; White: width; 100px: height; 100px: margin; 0px: padding; 0px: position; absolute: bottom; 0px: left; 17%. }:hotbar2 { background; White: width; 100px: height; 100px: margin; 0px: padding; 0px: position; absolute: bottom; 0px: left. 24;5%. }:hotbar3 { background; White: width; 100px: height; 100px: margin; 0px: padding; 0px: position; absolute: bottom; 0px: left; 32%. }:hotbar4 { background; White: width; 100px: height; 100px: margin; 0px: padding; 0px: position; absolute: bottom; 0px: left. 39;5%. }:hotbar5 { background; White: width; 100px: height; 100px: margin; 0px: padding; 0px: position; absolute: bottom; 0px: left; 47%. }:hotbar6 { background; White: width; 100px: height; 100px: margin; 0px: padding; 0px: position; absolute: bottom; 0px: left. 54;5%. }:hotbar7 { background; White: width; 100px: height; 100px: margin; 0px: padding; 0px: position; absolute: bottom; 0px: left; 62%. }:hotbar8 { background; White: width; 100px: height; 100px: margin; 0px: padding; 0px: position; absolute: bottom; 0px: left. 69;5%. }:hotbar9 { background; White: width; 100px: height; 100px: margin; 0px: padding; 0px: position; absolute: bottom; 0px: left; 77%. } </style> </head> <body> <script src="script.js"></script> <button class="hotbar1" id="hotbar1" onclick="document.getElementById('hotbar1').style.border = '7.5px solid red'" /> <button class="hotbar2" id="hotbar2" /> <button class="hotbar3" id="hotbar3" /> <button class="hotbar4" id="hotbar4" /> <button class="hotbar5" id="hotbar5" /> <button class="hotbar6" id="hotbar6" /> <button class="hotbar7" id="hotbar7" /> <button class="hotbar8" id="hotbar8" /> <button class="hotbar9" id="hotbar9" /> </body> </html>
解决方案3
-1 2021-04-26 19:49:29
onclick="document.getElementById("hotbar1").style.border: 7.5px solid Gray;"
应该：
onclick="document.getElementById("hotbar1").style = 'border: 7.5px solid Gray'"
解决方案4
-1 2021-04-26 19:55:37
onclick='document.getElementById("hotbar1").style.border="7.5px solid Gray"';
如何通过在tinymce编辑器中创建一个切换按钮来添加onclick事件？
[英]How to add an onclick event by creating a toggle button in tinymce editor?
如何将 onclick 事件添加到 Next.js 中的字符串呈现按钮？
[英]How to add onclick event to string rendered button in Next.js?
如何在 ReactJS 的 onClick 事件按钮上添加单独的 Loader 文件？
[英]How to Add seprate Loader file on a onClick event button on ReactJS?
如何动态创建按钮并为html页面添加onclick事件
[英]how to create button dynamically and add the onclick event for html page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在joomla按钮中添加onclick事件
如何将onclick事件添加到Twitter按钮？
如何在动态创建的按钮上添加onClick事件
如何将onclick事件添加到limesurvey提交按钮
使用onclick将'x'颜色添加到按钮边框
如何通过在tinymce编辑器中创建一个切换按钮来添加onclick事件？
如何将 onclick 事件添加到 Next.js 中的字符串呈现按钮？
如何在Razor View中将onclick事件添加到单选按钮
如何在 ReactJS 的 onClick 事件按钮上添加单独的 Loader 文件？
如何动态创建按钮并为html页面添加onclick事件
相关标签