Key events, what a mess, need to know more

JavaScript
1

i have to divs that i made functions that write text i type in them.
if i select one div by clicking on it one of the function is executed then i type text in the div.
BUT, if i select the second div,a second function execute and i write text in it, AND the text get writen in the first div.
so you have one function with key event writing in both divs at the same time.
this is where i’m stuck at my new project, if you understand this problem let me know how to solve it.
thank you
PS :if the above is complicated here it is in simple words:
simply what i want is each function should write on it’s own div alone using key events, without that text being writen in another div at the same time.

2

Hey @zak, the issue per se is clear, but it’s impossible to tell you where the mistake is without seeing the relevant code.

Here we tend to help people by guiding them towards their goal, rather than giving out working solutions. So it would be best if you can provide your code and a small reproducible demo to maximise your chances of getting the help you need.

1 Like
3

ok, here is a simple version of my project, an html code with js code in script tag:
notice how if you click on one text1, and type, it shows what you type, and if you click on text2 and type, it shows what you type on both text elements at the same time, I DON4T WANT THAT.

<html>
	<head>
		
	</head>
  <style>
    body{
        text-align: center;
        background-color: black;
    }
    #text1,#text2{
        color:rgb(0, 0, 0);
        font-size: 30px;
        background-color: white;
    }
  </style>
  <body>
      <p id="text1" onclick="changer1()">text1</p>
      <p id="text2" onclick="changer2()">text2</p>

    <script>
        function changer1(){
            window.addEventListener('keydown', function letter(event1){
                document.getElementById('text1').innerHTML = event1.key;
            })
        }		
        function changer2(){
            window.addEventListener('keydown', function letter(event2){
                document.getElementById('text2').innerHTML = event2.key;
            })
        } 
	</script>
  </body>
</html>

All i want is to click on each text element and type on that element alone.
if you can help, thank you.

4

This will create a listener for all keydown effect, so you don’t have to register it twice.
You can imagine it like a “global” keydown event, it’s not tight to where it gets clicked from.

You can get away in a couple of ways I think.

1 - Rather than registering to the window object, you can register to the keydown on an element element.keydown event this way you can keep two different events as it will be registered for two different elements.

2 - Keep a single event, but record through JS what was the latest clicked element and add there.
So something like:


let writeHere = undefined;

element1.onClick(() => {
  // set where we want to write
  writeHere = element1
  // add listener if not registered already
 window.addEventListener(...)
})

onKeyEvent(() => {
  // write where the user last clicked
  writeHere.innerText = ....
})

note that the above is just pseudo-code. The actual implementation will require a bit more logic and effort to prevent creating lots of event listeners.

Hope this helps :sparkles:

5

And how to actualy turn a key off and leave only certain keys active, like they do in games.
Is there a frame work for that?

6

You’ll possibly want to make a switch statement on the key property of the event.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.