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

54,331
7
110
133

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,603
15
23

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

change the margin using variable with JavaScript

3 Answers3