javascript - a small error with event.keyCode

Question

I am writing a Javascript to detect a certain alphabet in a text input by changing a <div>'s color. The code I have written below doesn't seem to be working, how can I solve this problem?

<input onkeypress="myFunction(event)"></input>
<div id="a" style="color:blue">text</div>
<script>
function myFunction(event) {
  var x = event.which || event.keyCode;
  if (x == 81) {
  document.getElementById('a').style.color = red;
} else {
  document.getElementById('a').style.color = green;
}
}
</script>

Set "green" &"red" instead of green and red. They are string values — liontass
– liontass, Commented Jan 3, 2021 at 19:50
BTW, don't use onkeypress, and don't use event.keyCode. These are deprecated. Look at the big red notices on mdn... — trincot
– trincot, Commented Jan 3, 2021 at 19:53

Blindman67 · Accepted Answer · 2021-01-03 20:06:25Z

You should not use KeyboardEvent.keyCode it is no longer in the standard. Use KeyboardEvent.key or KeyboardEvent.code. They are also a lot easier to remember as they hold the character or name of the key pressed.

You problem was that you attempted to assign variables to the color property rather than the strings "red", "green". It is far better to create the colors as a style and add or remove the style rule (CSS). That way you can have far more than just the color change.

Example

inputEl.addEventListener("keypress", inputEvent);
function inputEvent(event) {
    if (event.code === "KeyQ") {
        colDiv.classList.add("greenKey");
    } else {
        colDiv.classList.remove("greenKey");
    }
}

.greenKey {
    color: green;
}
div {
    color: red;
}

<input id="inputEl" placeholder="Type Q Green else Red"></input>
<div id="colDiv">Colour</div>

The Bomb Squad · Accepted Answer · 2021-01-03 19:50:27Z

1

//red and green are not defined but 'red' and 'green' should be there

<input onkeypress="myFunction(event)"></input>
<div id="a" style="color:blue">text</div>
<script>
function myFunction(event) {
  var x = event.which || event.keyCode;
  if (x == 81) {
  document.getElementById('a').style.color = 'red';
} else {
  document.getElementById('a').style.color = 'green';
}
}
</script>

answered Jan 3, 2021 at 19:50

The Bomb Squad

4,3471 gold badge14 silver badges21 bronze badges

Comments

trincot · Accepted Answer · 2021-01-03 20:02:17Z

As said in comments you should assign string literals, so "red" and "green" need quotation marks.

Some remarks:

you are using deprecated onkeypress and event.keyCode. Instead use onkeydown or oninput and event.key.
it is better practice to bind event handlers via JavaScript code, not via HTML attributes.
in HTML the <input> tag does not come with a closing tag, so remove that.
As in both cases you assign a color style, you could use the ternary operator.
You seem to want to detect a certain letter (uppercase "Q") in the input. But then you should not just look at the key that is being pressed, but also at the other characters that are already in the input. So use the oninput event, and check the value of the input element to see it includes the letter "Q".

let div = document.getElementById('a');
let input = document.querySelector("input");

input.addEventListener("input", function (event) {
  a.style.color = input.value.includes("Q") ? "red" : "green";
});

Don't include a "Q": <input>
<div id="a" style="color:blue">text</div>

Collectives™ on Stack Overflow

javascript - a small error with event.keyCode

3 Answers 3

Example

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related