Question
Help with Javascript, HTML, CSS. Instructions: I made a 9x9 grid of text input boxs and was wanting the color of the box to change
Help with Javascript, HTML, CSS.
Instructions:
I made a 9x9 grid of text input boxs and was wanting the color of the box to change to green if that is the box the user is in. I already made a way to change the text box to green when you click on a given box but you might notice that when you use tab, the green doesn't follow you to the next box. I would like the green to only be in the box the user is in which is why I made the green go away from the previous box when you click on a new box.
I am looking for help on two things:
1. Make it so when you use tab to go to the next input box, that new input box turns green.
2. If it is possible(not sure if it is), allow the user to use the arrow keys to move around the boxs while also keeping the same idea with whatever box the user is in, is green.
I'd like the style of the project to stay the same(the text boxs) but feel free to change any of the code to make it work. If you do change or add code, please leave a note explaining what you did. Thanks for your help!
chegg.js
let singleCell = []; window.onclick = e => { singleCell.push(e.target.id); console.log(singleCell); if(singleCell[singleCell.length-1].length==2||singleCell[singleCell.length-1].length==3){ document.getElementById(e.target.id).style.backgroundColor = '#b5ffb9'; } if(singleCell[singleCell.length-2].length==2||singleCell[singleCell.length-2].length==3){ document.getElementById(singleCell[singleCell.length-2]).style.backgroundColor = 'white'; } return singleCell; }
chegg.html
chegg.css
body { margin: 0; padding: 0; font-family: 'Arial' , serif; text-align: center; background: #7395AE; }
input[type=text] { border: 1px dotted #000; height: 7vmin; width: 7vmin; font-size: 20px; font-weight: 600; text-align: center }
.top { border-top: 2px solid #000!important }
.bottom { border-bottom: 2px solid #000!important }
.left { border-left: 2px solid #000!important }
.right { border-right: 2px solid #000!important } .nav{ background-color: #B1A296; color: #ffffff; font-size: 40px; list-style: none; text-align: center; margin:0; padding: 25px 0 25px 0; }
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started