-4

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.

Improve this question
New contributor
pirates is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
6
  • 4
    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. 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 Commented Nov 18 at 12:48
  • 4
    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? Commented Nov 18 at 12:48
  • Thanks to all of you for giving me such a quick answer! Hope you have a nice day! 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. Commented Nov 18 at 13:41

1 Answer 1

Reset to default
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>

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

2 Comments

Great answers include some explanation, not just code.
I'd also suggest using a <button> element so it works with a keyboard and has better accessibility.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.