CODEWITHSUNDEEP
javascript
Moses Kim
Moses Kim

Reputation: 242

javascript if statement boolean comparison not working

var keydownTriggered = false;
console.log(keydownTriggered);
document.getElementById('form').addEventListener('keydown', e => {
  setTimeout(function() {
    console.log("Keydown Start Offset", window.getSelection().getRangeAt(0).startOffset);
    console.log("Keydown End Offset", window.getSelection().getRangeAt(0).endOffset);
    keydownTriggered = true;
    console.log(keydownTriggered);
  }, 0);
})
document.getElementById('form').addEventListener('keyup', e => {
  keydownTriggered = false;
  console.log(keydownTriggered);
})

if (!keydownTriggered) {
  document.getElementById('form').addEventListener('click', e => {
    console.log("Click: Keydown Start Offset", window.getSelection().getRangeAt(0).startOffset);
    console.log("Click: Keydown End Offset", window.getSelection().getRangeAt(0).endOffset);
    keydownTriggered = false;
    console.log(keydownTriggered);
  })
}
<div id="form" contenteditable="true"></div>

This code shouldn't trigger the 'click' event when the 'keydown' event is triggered. For example, when I'm long pressing 'A' it means that 'keydown' is triggered so when I click anywhere in the contenteditable element, the console.log inside the if statement should not be triggered. However, I get this result.

test.html:10 Keydown Start Offset 8
test.html:11 Keydown End Offset 8
test.html:13 true
test.html:23 Click: Keydown Start Offset 8
test.html:24 Click: Keydown End Offset 8
test.html:26 false
test.html:10 Keydown Start Offset 9
test.html:11 Keydown End Offset 9

The value of keydownTriggered is true is seen in line 13 but the if statement is still triggered.

I tried changing the if statement to (keydownTriggered == true), (keydownTriggered === true) and tried changing all boolean value to numbers (true to 1 and false to 0) but got nothing. What am I doing wrong here?

Upvotes: 0

Views: 58

Answers (1)

Terence Cheng
Terence Cheng

Reputation: 594

You should add if statement in the click event inside, otherwise when you click, the click event callback will always be run

document.getElementById('form').addEventListener('click', e => {
    if (!keydownTriggered){
        console.log("Click: Keydown Start Offset", window.getSelection().getRangeAt(0).startOffset);
        console.log("Click: Keydown End Offset", window.getSelection().getRangeAt(0).endOffset);
        keydownTriggered = false;
        console.log(keydownTriggered);
    }
})

Upvotes: 1

Related Questions