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>
4 answers
solution1
1 2014-12-27 02:48:05
getElementsByClassName returns a HTMLCollection. So, you have to specify the element to work.
for example:
document.getElementsByClassName('player')[0].style.marginTop = playerPosition+".px";
solution2
1 ACCPTED 2014-12-27 02:49:22
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.
solution3
1 2014-12-27 02:55:34
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";
solution4
0 2022-09-28 09:31:47
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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.