How can I add a keyboard to a game like wordle when using html, css and javascript [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 3 days ago.

Improve this question

I'm looking for a way to code a keyboard in javascript and I've already got the structure using two for loops to create a table that contains 3 rows to simulate an azerty keyboard.

I need a function that's able to search through a table like this one:

let keyboard_layout = [
['A','Z','E','R','T','Y','U','I','O','P'],
['Q','S','D','F','G','H','J','K','L','M'],
['W','X','C','V','B','N']
]

and when I give the function a letter and a color it should add this to the specific letter's position in my html.

Ok. So what is it you need from us? Are you stuck on something specific? Please take the tour first. Then read How to Ask and how to make a minimal reproducible example of your issue before you edit your post. Right now it's too vague, brief and unclear for anyone to give you meaningful help. We aren't going to write you a keyboard app for JS, but we could help you with something specific if you can articulate it clearly. Thanks. — ADyson
– ADyson, Commented Nov 18 at 12:33
First of all, you need to draw this keyboard into the html itself. Second, ``` function update_keyboard_colors(guess_letter, color){ const keyboard_table = document.getElementById("keyboard-container").getElementsByTagName("td") for (let i = 0; i < keyboard_table.length; i++){ if (keyboard_table[i].textContent == guess_letter.toUpperCase()) { keyboard_table[i].style.backgroundColor = color break; } } } ``` this code should go over the table and give each block it's color if necessary — S G
– S G, Commented Nov 18 at 12:48
And what are you asking? What problem have you encountered in your attempt? "I need a function that's able to search through a table like this one" - What stops you from writing code to find a value in an array? — David
– David, Commented Nov 18 at 12:48
Thanks to all of you for giving me such a quick answer! Hope you have a nice day! — pirates
– pirates, Commented Nov 18 at 12:49
Please edit your question to include a minimal reproducible example as has been previously commented. In this context, that should include minimal relevant HTML as well. As it stands, even with your most recent edit, you've not yet provided enough information for people to help. We want to help. — Sean
– Sean, Commented Nov 18 at 13:41

cssyphus · Accepted Answer · 2025-11-18 12:44:41Z

0

Something like this might get you started...

(Note: answer provided before question was updated with "table" code.)

document.querySelector('#keyboard').addEventListener('click', handle_keyboard_click);

function handle_keyboard_click(e){
  const key = e.target.id;
  //alert(`You pressed ${key}`)
  const outDiv = document.querySelector('#out');
  outDiv.textContent += key;
}

table{border-collapse:collapse;font-size:1.5rem;}
td{border:1px solid #aaa;padding:2px 5px;cursor:pointer;}
#out{margin-top:20px;padding:10px;font-size:2rem;background:lightblue;border:1px solid #0000ffAA;}

<div id="keyboard">
  <table><tbody>
    <tr><td id="a">a</td><td id="b">b</td><td id="c">c</td></tr>
  </tbody></table>
</div>
<div id="out"></div>

answered Nov 18 at 12:44

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sean Nov 18 at 13:38

Great answers include some explanation, not just code.

StackByMe Nov 18 at 13:56

I'd also suggest using a <button> element so it works with a keyboard and has better accessibility.

Collectives™ on Stack Overflow

How can I add a keyboard to a game like wordle when using html, css and javascript [closed]

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related