JavaScript DOM manipulation in the Browser [closed]

Question

I am trying to get an element, and element's fontSize property and update the size with keypresses. I press the up'ArrowUp' and down 'ArrowDown' but nothing happens, the fontSize property does not change. Could someone please explain to be why the eventListener is not working? Thank you in advance.

let example = document.querySelector('exampleElement')
let exampleSize = getFontSize(example);


function getFontSize(element) {
    return parseInt(window.getComputedStyle(element).fontSize);
}

example.addEventListener('keydown', (event) => {
        switch(event.key){
            case 38:
            example.style.fontSize = `${exampleSize + Math.ceil(exampleSize * .10)}px`;
            break;
            case 40: 
            ballon.style.fontSize = `${exampleSize - Math.ceil(exampleSize * .10)}px`;
            break;
        }
});

I have tried to rewrite this function for well over two hours now, any help would be greatly appreciated! I am expecting the html element to 'grow' when the up arrow button on the key board is pressed and the inverse when the down arrow button is pressed.

Answer 1

Issue: key property misuse

The key property on KeyboardEvent is of type string, not number as suggested by the switch statement that checks for numbers 38 and 40. Here is a quick table derived from this tool for your reference.

	Up Arrow	Down Arrow
event.key	ArrowUp	ArrowDown
event.which (deprecated)	38	40

Likely Issue: querySelector misuse

The first line, including document.querySelector('exampleElement'), is not likely intended. This method accepts a CSS selector, therefore you are currently looking for an element with the tag name exampleElement, which is not the name of a standard HTML5 tag.

To look for an element with an id of exampleElement, for instance, you would do document.querySelector('#exampleElement') where the # indicates that we are searching for an ID.

Potential Issue: Event is bound to target element

Since example is used as the event target, and not something like window, the element will need to be focused in order for the event callback to fire. This may or may not be intended.

Potential Issue: Effect does not compound

The latest value for the font size is not retained. The initial font size of the text is measured, and then is effectively used as a constant. Each time the event fires on a recognized key, the font size will be set to some constant value (110% or 90% of the initial size).

Typo

The latter case references some variable ballon which appears to be uninitialized.

---

Minimally repaired code

Also added some HTML/CSS to make it runnable as a snippet.

const example = document.querySelector("#exampleElement");
let currentSize = parseInt(window.getComputedStyle(example).fontSize);

window.addEventListener("keydown", (event) => {
    switch(event.key) {
        case "ArrowUp":
            currentSize = Math.ceil(currentSize * 1.1);
            example.style.fontSize = `${currentSize}px`;
            break;
        case "ArrowDown": 
            currentSize = Math.floor(currentSize * 0.9);
            example.style.fontSize = `${currentSize}px`;
            break;
    }
});

#exampleElement {
  font-size: 16px;
  font-family: system-ui;
}

<span id="exampleElement">
    Use the arrow keys to scale my size!
</span>