Is there a way to use a specific keyboard input to alter the characteristics of shapes on my webpage?

Question

Is there a way to use a specific keyboard input to alter the characteristics of shapes on my webpage?

Is there a way to change certain attributes of a shape onscreen when a specific key is pressed by the user? For example, can I make it so that pressing "a" changes the color of the shape?

I attempted to modify a mouse rollover event to work with the desired key press input.

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

The goal is to have different shapes change colors based on the user's key presses, but currently, the code does not respond to any inputs.

javascript html css

Answer 1

Answer №1

Alright, so there are a few issues in your code that need to be addressed. Firstly, your JavaScript syntax is incorrect.

Incorrect approach

function onkeypress(evt);
    if(onkeypress == 49)

Correct approach

function onkeypress(evt) {

    if ( /* add your condition here */ ) {
        /* add your code here */
    }
}

In addition, you need to add an event listener to your function. This listener will listen for specific events and call a function (your callback). You can find more information here. Here's how you can use it:

document.addEventListener("keypress", onkeypress); // Add the listener

function onkeypress(e) {
    /* Your callback function */
}

Alternatively

document.addEventListener("keypress", (e) => {
    /* Your callback function */
})

Furthermore, your CSS within the second snippet is not placed correctly. It should be enclosed within the <style></style> tag. Additionally, your <script></script> tags must be placed at the end of the body for proper functionality. Take a look at the corrected code below.

<!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('The letter `a` has been pressed!');
          let topRectangle = document.getElementsByClassName("toprectangle");
          console.log(topRectangle)
          topRectangle[0].style.backgroundColor = "#000"
        }
    }
</script>

</body>
</html>

Answer 2

Alright, so there are a few issues in your code that need to be addressed. Firstly, your JavaScript syntax is incorrect.

Incorrect approach

function onkeypress(evt);
    if(onkeypress == 49)

Correct approach

function onkeypress(evt) {

    if ( /* add your condition here */ ) {
        /* add your code here */
    }
}

In addition, you need to add an event listener to your function. This listener will listen for specific events and call a function (your callback). You can find more information here. Here's how you can use it:

document.addEventListener("keypress", onkeypress); // Add the listener

function onkeypress(e) {
    /* Your callback function */
}

Alternatively

document.addEventListener("keypress", (e) => {
    /* Your callback function */
})

Furthermore, your CSS within the second snippet is not placed correctly. It should be enclosed within the <style></style> tag. Additionally, your <script></script> tags must be placed at the end of the body for proper functionality. Take a look at the corrected code below.

<!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('The letter `a` has been pressed!');
          let topRectangle = document.getElementsByClassName("toprectangle");
          console.log(topRectangle)
          topRectangle[0].style.backgroundColor = "#000"
        }
    }
</script>

</body>
</html>

Answer 3

Answer №2

It seems like there are some issues in your code that need to be addressed.

Firstly, it appears that you have CSS styling defined without enclosing it properly within your HTML structure.

Secondly, there are errors in your JavaScript function and its purpose is not clear. It's essential to identify the intended functionality of this function for successful implementation.

To address these issues, here is a suggestion to change the background-color on pressing Enter key using 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>

Answer 4

It seems like there are some issues in your code that need to be addressed.

Firstly, it appears that you have CSS styling defined without enclosing it properly within your HTML structure.

Secondly, there are errors in your JavaScript function and its purpose is not clear. It's essential to identify the intended functionality of this function for successful implementation.

To address these issues, here is a suggestion to change the background-color on pressing Enter key using 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>

Is there a way to use a specific keyboard input to alter the characteristics of shapes on my webpage?

Answer №1

Incorrect approach

Correct approach

Alternatively

Answer №2

Similar questions

index.html: using jquery for selecting colors

A ReferenceError was thrown because angular is not defined within the angular-moment.js script

Firefox is mistakenly interpreting a pasted image from the clipboard as a string instead of a file, causing

The function type '(state: State, action: AuthActionsUnion) => State' cannot be assigned to the argument

Adding flair to a fresh element and then removing it upon its inception

What is the best way to incorporate a dynamic background in NextJS using Tailwind?

Why isn't the Head component producing any visible results in the DOM when using Next.js?

Utilizing ng-options within an ng-repeat to filter out previously chosen options

Determine the height of an element within an ng-repeat directive once the data has been fetched from an

Should I generate an array or pull data directly from the database?

Invoke a function from a different vue.js component using the this.$refs property

Exploring the intricacies of React's useEffect: Solving the challenge of updating data when two separate dependency arrays are

ways to validate the calling function in jquery

Comparing the Distinctions of jQuery Post and HTML Form Post

Navigating with Google Maps and Its Pointers

Executing a script within an ASP.NET MVC Project

How to display HTML on top without altering the viewport in React?

Custom server not required for optional dynamic routes in NextJS version 9.5.2

What is the best way to incorporate one Div within another Div using JavaScript?

How can I align an image and text alongside another image using HTML and CSS?