如何使特定的键盘输入更改页面上的形状属性？
[英]How do I make a specific keyboard input change the properties of shapes on my page?
问题描述
How do I make it so when the user presses a certain key certain attributes of the shape change. 
当用户按某个键时，如何改变形状的某些属性。 For example, how would I make it so when the user presses "a" on the keyboard the shape onscreen changes colour. 例如，当用户按下键盘上的“a”时，如何在屏幕上的形状改变颜色时如何制作它。
I've tried editing a mouse rollover event to fit the key press input I want it to respond to. 我已经尝试编辑鼠标翻转事件以适应我希望它响应的按键输入。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page Title</title> <link rel="stylesheet" href="css/screen.css"> <style> .box1{ background:#1E90FF; width: 1000px; height:100px; float:right; margin: 0px 0px 0px 0px; } .circle { height: 200px; width: 200px; background-color: #1E90FF; border-radius: 50%; } .toprectangle { height: 80px; width: 200px; background-color: #1E90FF; float:right; margin: 0px 40px 20px 80px; border: 1px solid #1E90FF; } .square { height: 80px; width: 200px; background-color: #1E90FF; float:right; margin: 10px 40px 10px 1000px; border: 1px solid #1E90FF; <!--Third square down--> } .box2{ background:#1E90FF; width: 1400px; height:100px; float:right; margin: 60px 0px 0px 0px; <!--rectangle at the bottom--> } .box3{ background:#1E90FF; width: 200px; height:600px; margin: 0px 20px 130px 0px; <!--rectangle going up the side--> } .circle1{ height: 200px; width: 200px; background-color: #1E90FF; border-radius: 50%; margin: 10px 500px 0px; } </style> </head> <body> <script> function onkeypress(evt); if(onkeypress == 49): .toprectangle { height: 80px; width: 200px; background-color: #ff78ff; float:right; margin: 0px 40px 20px 80px; border: 1px solid #1E90FF; } </script> <div class="box1"></div> </div> <div class="circle"></div> <div class="circle1"></div> <div class="toprectangle"></div> <div class="square"></div> <div class="square"></div> <div class="box3"></div> <div class="box2"></div> <svg width="500" height="150"> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page Title</title> <link rel="stylesheet" href="css/screen.css"> <style> </style> </head> <body> .toprectangle { height: 80px; width: 200px; background-color: #1E90FF; float:right; margin: 0px 40px 20px 80px; border: 1px solid #1E90FF; } <script> function onkeypress(evt); if(onkeypress == 49): .toprectangle { height: 80px; width: 200px; background-color: #ff78ff; float:right; margin: 0px 40px 20px 80px; border: 1px solid #1E90FF; } </script> <div class="box1"></div> </div> <div class="circle"></div> <div class="circle1"></div> <div class="toprectangle"></div> <div class="square"></div> <div class="square"></div> <div class="box3"></div> <div class="box2"></div> </body> </html>
I expect different shapes to change colour depending on what key the user presses, but the code at the moment does not respond to any input. 我希望不同的形状根据用户按下的键来改变颜色，但此刻的代码不响应任何输入。
2 个解决方案
解决方案1
0 2019-05-02 14:46:52
There are errors in your code. 您的代码中存在错误。
1: You have CSS styling without enclosing it right in your HTML. 1：你有CSS样式而没有将它包含在你的HTML中。
2: Your JavaScript function has errors ( not sure what you're trying to achieve with that function?). 2：您的JavaScript函数有错误（不确定您尝试使用该函数实现了什么？）。
Try this. 尝试这个。 it changes the background-color when you press Enter (2 examples, Vanilla JavaScript & jQuery): 当你按Enter键时它会改变背景颜色（2个例子，Vanilla JavaScript和jQuery）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page Title</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <style> </style> </head> <body> <style> .toprectangle { height: 80px; width: 200px; background-color: #1E90FF; float: right; margin: 0px 40px 20px 80px; border: 1px solid #1E90FF; } </style> <script> /* WITH VANILLA JAVASCRIPT */ document.onkeydown = function (evt) { evt = evt || window.event; if (evt.keyCode == 13) { let elements = document.getElementsByClassName('toprectangle'); let requiredElement = elements[0]; requiredElement.style.background = "green"; } }; /* WITH JQUERY */ $(document).on('keypress', function (e) { if (e.which == 13) { // If you press "Enter" key $(".toprectangle").css({ "background-color": "green" }) } }); </script> <div class="box1"></div> </div> <div class="circle"></div> <div class="circle1"></div> <div class="toprectangle"></div> <div class="square"></div> <div class="square"></div> <div class="box3"></div> <div class="box2"></div> </body> </html>
解决方案2
0 2019-05-02 14:54:10
Ok so there is some things wrong in your code... First thing you JS (JavaScript) is wrong, the syntax 好的，你的代码中有些问题......首先你JS（JavaScript）是错误的，语法
Wrong way 错误的方法
function onkeypress(evt);
if(onkeypress == 49)
Right way 正确的路
function onkeypress(evt) {
if ( /* your condition */ ) {
/* your code */
}
}
Also you need to add an listener to your function, the listener will listen to some event and call a function (Your callback), you can read more here . 你还需要为你的函数添加一个监听器，监听器会监听一些事件并调用一个函数（你的回调），你可以在这里阅读更多内容。 To use it would be like: 使用它就像：
document.addEventListener("keypress", onkeypress); // Add the listener
function onkeypress(e) {
/* Will handler your callback */
}
Or 要么
document.addEventListener("keypress", (e) => {
/* Will handler your callback */
})
And your CSS in the second snnipet is wrong, you must use it inside the <style></style> tag. 而你在第二个snnipet中的CSS是错误的，你必须在<style></style>标签内使用它。 And you <script></script> tag must be in the end of the body, to works fine. 并且你的<script></script>标签必须在主体的末尾，才能正常工作。 Try the code bellow. 试试下面的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" href="css/screen.css">
<style>
.toprectangle {
height: 80px;
width: 200px;
background-color: #1E90FF;
float:right;
margin: 0px 40px 20px 80px;
border: 1px solid #1E90FF;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="circle"></div>
<div class="circle1"></div>
<div class="toprectangle"></div>
<div class="square"></div>
<div class="square"></div>
<div class="box3"></div>
<div class="box2"></div>
<script>
document.addEventListener("keypress", onkeypress);
function onkeypress(e) {
console.log(`Letter: ${e.key} with code ${e.keyCode}`);
if (e.keyCode == 97) {
console.log('Letter `a` has been pressd!');
let toprectangle = document.getElementsByClassName("toprectangle");
console.log(toprectangle)
toprectangle[0].style.backgroundColor = "#000"
}
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.