change the margin using variable with JavaScript

Question

I'm trying to change the value of the top margin when hitting the up arrow key the code seems right to me but i don't know why it wont work !

JavaScript

var playerPosition = 0;

window.onkeyup = function(e) {
    var key = e.keyCode ? e.keyCode : e.which;

    if(key = 38) {
        playerPosition += 10;

    } else if(key = 40) {
        playerPosition -= 10;
    }

    document.getElementsByClassName('player').style.marginTop = playerPosition+".px";

 }

html/CSS

.mainDiv {
        display: block;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: black;
        width: 600px;
        height: 400px;
    }
    .player {
        position: absolute;
        background-color: #FFF;
        width: 5px;
        height: 70px;
        margin: 20px 0 0 10px;
        padding: 0 0 0 0;
    }
    .bar {
        top: 30px;
        height: 100%;
        width: 5px;
        border-style: dashed;
        border-left: 5px;
        border-color: #FFF;
        position: fixed;
        left: 50%;
    }
    .ai {
        position: absolute;
        right: 10px;
        background-color: #FFF;
        width: 5px;
        height: 70px;
        margin: 164px 0 0 10px;
        padding: 0 0 0 0;
    }

    .ball {
        position: absolute;
        left: 50px;
        bottom: 69px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #FFF;
    }
    </style>
    <script src="sprite.js" defer="defer"></script>
</head>
<body>
    <div class="mainDiv">
        <div class="player"></div>
        <div class="bar"></div>
        <div class="ai"></div>
        <div class="ball"></div>
    </div>
</body>
</html>

possible duplicate of [GetElementsByClassName Not Working As Expected](http://stackoverflow.com/questions/23412743/getelementsbyclassname-not-working-as-expected) — , Dec 27 '14 at 07:52
See also http://stackoverflow.com/questions/24292561/javascript-getelementsbyclassname-not-working-with-select, http://stackoverflow.com/questions/19289907/getelementsbyclassname-produces-error-undefined, http://stackoverflow.com/questions/10693845/why-getelementsbyclassname-does-not-work-for-me-what-does-it-return, etc. — , Dec 27 '14 at 07:54

Michael Zajac · Accepted Answer · 2014-12-27T02:55:16.213

2

document.getElementsByClassName('player') returns a NodeList of elements (array-like) that have the class player. You need to loop through the list and apply the style changes to each:

var players = document.getElementsByClassName('player');
for(var i = 0; i < players.length; i++)
    players[i].style.marginTop = playerPosition+"px";

Or I guess if you only have one, apply it to the 0th element.

fiddle

edited Dec 27 '14 at 02:55

answered Dec 27 '14 at 02:49

Michael Zajac

55,144
7
113
138

It returns a `NodeList` not an array. – Weafs.py Dec 27 '14 at 02:50
Technically speaking, `getElementsByClassName` returns an `HTMLCollection`, not a `NodeList`, although that doesn't matter for the purposes of this question. – Dec 27 '14 at 07:56

matvs · Answer 2 · 2019-04-02T10:28:50.137

2

Function is called "getElements[...]", plural, so it returns an array of HTML elements with class name provided. Moreover in your conditional statements you used assignment operator (=) instead of comparison operator (==). jsfiddle

document.getElementsByClassName('player')[0].style.marginTop = playerPosition+"px";

edited Apr 02 '19 at 10:28

answered Dec 27 '14 at 02:55

matvs

1,763
16
26

score 1 · Answer 3 · answered Dec 27 '14 at 02:48

1

getElementsByClassName returns a HTMLCollection. So, you have to specify the element to work.

for example:

document.getElementsByClassName('player')[0].style.marginTop = playerPosition+".px";

answered Dec 27 '14 at 02:48

sbaglieri

319
2
10

score 0 · Answer 4 · edited Oct 02 '22 at 11:14

0

document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
    document.getElementById("MyElement").classList.toggle('MyClass');

edited Oct 02 '22 at 11:14

Donald Duck

8,409
22
75
99

answered Sep 28 '22 at 09:31

waleed abd elhameed

1
5

1

Please read [answer] and [edit] your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. – Adriaan Sep 28 '22 at 09:34

change the margin using variable with JavaScript

4 Answers4