So I want to change element's position by 100 on keyboard button press.
My code:
document.addEventListener("keypress", (event) => {
var keyName = event.key;
if (keyName == "s") {
console.log(keyName);
document.getElementById("element").style.top + 100;
};
}, false);
<div id="element">•</div>
And the only thing the code does, is sending log to console about pressed key.
EDIT: The element's position is already Absolute
position: absolute;
To achieve what you are trying you have to do the folowing:
position: absolute or position: relativestyle.top properie is a setter so you have to set it´s value like style.top = '100px'document.addEventListener("keypress", (event) => {
const elementToMove = document.getElementById("element");
var keyName = event.key;
if (keyName == "s") {
elementToMove.style.top = (parseInt(elementToMove.style.top || 0) + 100)+'px';
};
}, false);<div id="element" style="position: absolute;">•</div>The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements. Make sure your element is positioned (absolute, relative, fixed, static etc...).
Your code is buggy here:
document.getElementById("element").style.top + 100;
there should be an assignment to element (+100) will not work.
if you want to add margin then do the following:
document.getElementById("element").style.marginTop = "100px";