JavaScript E.Listener

Question

I am trying to run a function when user clicks on an rectangle by using eventlistener. So far I only managed to run the function by using onkeydown. The eventListener doesnt work for me. The script tag is place in the body.

<script>
  var teleso = document.getElementById("teleso")
  teleso.addEventListener("click", anim);
  // document.onkeydown = anim;
  var telesoVlevo = 0;



  function anim(e) {



    if (e.keyCode == 37) {
      telesoVlevo -= 2;
      teleso.style.left = telesoVlevo + "px";

      if (telesoVlevo <= 0) {
        telesoVlevo += 2;
      }
    }
  }
</script>

question from:https://stackoverflow.com/questions/65918481/javascript-e-listener

Answer 1

Even though the question isn't very clear, I think the problem is that you are trying to look for a keycode, while if you try and add:

function anim(e) {
      console.log(e.keyCode);
      }

you'll get undefiend, and that's your problem (click event does not return an e.keyCode value)

so you can actually add to the condition:

function anim(e) {



if (e.keyCode == 37 || e.keyCode === 'undefined') {
  telesoVlevo -= 2;
  teleso.style.left = telesoVlevo + "px";

  if (telesoVlevo <= 0) {
    telesoVlevo += 2;
  }
}

}

of course that's assuming the CSS positioning is properly set: a wrapper that is set to position: realative and the element you're trying to animate, with position: absolute.