Develop Reference

++ a number when two outputs are the same

Tales game where you select heads or tails and then the computer will select heads or tails and then a random output will be put on the screen if you selected the right one it will add one point to you or the computer or both the first one to five wins. I'm having problem adding the points to ‘thePlayersPoints’ and ‘theComputerPoints’. The outcome I what is where when they equal it will add a point. but what's happening is because it's a click function is it will only Add them if the value is already on the page. What I mean is if you click heads an heads comes up it won't add it until you click it again.
The function that tries to add the points start at line 67.
//Btns
let btn = document.querySelectorAll('button')
let HeadsBtn = document.querySelector('.heads')
let TailsBtn = document.querySelector('.talis')
let output = document.querySelector('.output')
//Player
let PlayersChoice = document.querySelector('.PlayersChoice')
let ThePlayersPoints = document.querySelector('.ThePlayersPoints')
//computer
let ComputerChoice = document.querySelector('.ComputerChoice')
let TheComputersPoints = document.querySelector('.TheComputersPoints')
//winner
let winner = document.querySelector('.winner')
//headsAndTails
let player = 0
let computer = 0
//get The output.
let btnContaner = document.querySelector('.btnCon')
btnContaner.addEventListener('click', pinkingOne)
function pinkingOne(TheOutput){
let random = Math.floor(Math.random() * 2)
if(random === 0){
TheOutput = 'Tails'
}else{
TheOutput = 'Heads'
}
output.innerText = `${ TheOutput}`
}
//Adds Heads to Player selected.
HeadsBtn.addEventListener('click', function(){
PlayersChoice.innerHTML = 'Heads'
})
//Adds Tails to Player selected.
TailsBtn.addEventListener('click',function(pick){
pick ='Tails'
PlayersChoice.innerHTML = `${pick}`
})
//computers pinking heads or tails
btnContaner.addEventListener('click',computersPick)
function computersPick(pick){
let random = Math.floor(Math.random() * 2)
if(random === 1){
pick = 'Heads'
}else{
pick = 'Talis'
}
ComputerChoice.innerText = `${pick}`
}
//adding the points to the player and computer
HeadsBtn.addEventListener('click',function(){
if(PlayersChoice.innerHTML === output.innerHTML){
ThePlayersPoints.innerHTML++
}else{
if (ComputerChoice.innerHTML === output.innerHTML){
TheComputersPoints.innerHTML++
}
}
})
TailsBtn.addEventListener('click',function(){
if(PlayersChoice.innerHTML === output.innerHTML){
ThePlayersPoints.innerHTML++
}else{
if (ComputerChoice.innerHTML === output.innerHTML){
TheComputersPoints.innerHTML++
}
}
})
//^^^^^^^adding the points to the player and computer ^^^^^^^^
//outputing the winner.
function andTheWinnerIs(){
let Tbtn = document.querySelector('#Tails')
let Hbtn = document.querySelector('#Heads')
Tbtn.addEventListener('click',addforplayer)
Hbtn.addEventListener('click',addforplayer)
//outputing the winner
if ( ThePlayersPoints.innerHTML == 5 && TheComputersPoints.innerHTML == 5){
winner.innerHTML = `It's a Tie`;
} else if (ThePlayersPoints.innerHTML == 5){
winner.innerHTML = `You Win!!!`;
} else if (TheComputersPoints.innerHTML == 5){
winner.innerHTML = `Computer Wins!!!`;
}
}
html{
background-color:rgba(128, 128, 128, 0.712);
margin:0;
padding:0;
top:0;
}
body {
overflow: hidden; /* Hide scrollbars */
}
.PlayerSelected{
position: relative;
right: 150px;
font-family: 'Quantico', sans-serif;
}
.ComputerSelected{
position: relative;
left: 150px;
top: -43px;
font-family: 'Quantico', sans-serif;
}
.PlayerPoints{
position: relative;
left: -110px;
top:109px;
font-family: 'Quantico';
}
.ComputerPoints{
position: relative;
right: -103px;
top: 60px;
font-family: 'Quantico';
}
.PlayersChoice{
color: rgba(19, 107, 207, 0.836);
background-color: black;
width: 0px;
position: relative;
left: -80px;
top: -37px
}
#Theoutput{
font-size:xx-large;
position: relative;
top: -120px
}
#ThePlayersPoints{
position: relative;
top:23.5px;
width:10px;
left:-75px;
font-family: 'Quantico';
}
#TheComputersPoints{
position: relative;
left: 150px;
top: -5px;
font-family: 'Quantico';
}
.ComputerChoice{
position: relative;
right: -250px;
color:red;
top: -90px
}
#Thewinner{
background-color:aqua;
width: 200px;
}
.H1{
font-family: 'Kaushan Script', cursive;
text-shadow: 2px 2px rgba(255, 0, 0, 0.589);
}
#Heads{
outline: none;
border: none;
font-size: xx-large;
cursor: pointer;
}
#Tails{
outline: none;
border: none;
font-size: xx-large;
cursor: pointer;
}
#Tails:hover{
font-size: 50px;
background-color:rgba(0, 26, 255, 0.534);
box-shadow: 5px 10px gray;
}
#Heads:hover{
font-size: 50px;
background-color:rgba(255, 0, 0, 0.664);
box-shadow: -5px 10px gray;
}
.pickHeadsOrTalis{
font-family: 'Staatliches';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Light Switching</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
</style>
<style>
#import url('https://fonts.googleapis.com/css2?family=Quantico&display=swap');
</style>
<style>
#import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
</style>
</head>
<body>
<center>
<h1 class='H1'>First Player to 5 points wins!</h1>
<h3 class='PlayerSelected'>Player selected:</h3>
<div id='PlayersChoice' id='o' class='PlayersChoice'></div>
<h3 class='ComputerSelected' >Computer selected:</h3>
<div id='ComputerChoice' class='ComputerChoice '></div>
<h4 class='PlayerPoints' >Player:</h4>
<h4 class='ComputerPoints'> Computer: </h4>
<div class="PlayersAndComputersPoints">
<div id='ThePlayersPoints' class="ThePlayersPoints">0</div>
<div id='TheComputersPoints' class="TheComputersPoints">0</div>
</div>
<div id='Theoutput' class="output"></div>
<h1 id='Thewinner' class="winner"></h1>
<h1 class="pickHeadsOrTalis">Pick heads or tails?</h1>
<div id='allBtn' class="btnCon">
<button id='Heads' class="heads">Heads</button> <button id='Tails' class='talis'>Tails</button>
</div>
</center>
<script src="app.js"></script>
</body>
</html>

First of all, you are adding in two different 'click' event listeners in the buttons and they should be combined into one.
Secondly the if statement in the second event listener will only ever get to evaluate the computer's choice if the player's choice doesn't match. You need to remove the else between the player evaluation and the computer's evaluation and just do two different if statements for each player.
You also had two extra unneeded event listeners on the .btnContainer element. You can just call those functions all in the one button click event.
You will also want to disable the buttons after a game is won and add in a reset button to start the game over.
I hope that this helps
See snippet below for the changes I made:
//Btns
let btn = document.querySelectorAll('button')
let HeadsBtn = document.querySelector('.heads')
let TailsBtn = document.querySelector('.talis')
let output = document.querySelector('.output')
//Player
let PlayersChoice = document.querySelector('.PlayersChoice')
let ThePlayersPoints = document.querySelector('.ThePlayersPoints')
//computer
let ComputerChoice = document.querySelector('.ComputerChoice')
let TheComputersPoints = document.querySelector('.TheComputersPoints')
//winner
let winner = document.querySelector('.winner')
//headsAndTails
let player = 0
let computer = 0
//get The output.
let btnContaner = document.querySelector('.btnCon')
//btnContaner.addEventListener('click', pinkingOne)
function pinkingOne() {
let TheOutput;
let random = Math.floor(Math.random() * 2)
if (random === 0) {
TheOutput = 'Tails'
} else {
TheOutput = 'Heads'
}
output.innerText = `${ TheOutput}`
}
//Adds Heads to Player selected.
// HeadsBtn.addEventListener('click', function(){
//PlayersChoice.innerHTML = 'Heads'
//})
//Adds Tails to Player selected.
//TailsBtn.addEventListener('click',function(pick){
// pick ='Tails'
// PlayersChoice.innerHTML = `${pick}`
//})
//computers pinking heads or tails
//btnContaner.addEventListener('click',computersPick)
function computersPick() {
let pick;
let random = Math.floor(Math.random() * 2)
if (random === 1) {
pick = 'Heads'
} else {
pick = 'Tails'
}
ComputerChoice.innerText = `${pick}`
}
//adding the points to the player and computer
HeadsBtn.addEventListener('click', function() {
PlayersChoice.innerHTML = 'Heads'
pinkingOne();
computersPick();
if (PlayersChoice.innerHTML === output.innerHTML) {
player++
ThePlayersPoints.innerHTML = player;
}
// else {
if (ComputerChoice.innerHTML === output.innerHTML) {
computer++
TheComputersPoints.innerHTML = computer
}
//}
if (player === 5 || computer === 5) {
andTheWinnerIs();
}
})
TailsBtn.addEventListener('click', function() {
PlayersChoice.innerHTML = 'Tails'
pinkingOne();
computersPick();
if (PlayersChoice.innerHTML === output.innerHTML) {
player++
ThePlayersPoints.innerHTML = player;
}
// else {
if (ComputerChoice.innerHTML === output.innerHTML) {
computer++
TheComputersPoints.innerHTML = computer
}
//}
if (player === 5 || computer === 5) {
andTheWinnerIs();
}
})
//^^^^^^^adding the points to the player and computer ^^^^^^^^
//outputing the winner.
function andTheWinnerIs() {
//let Tbtn = document.querySelector('#Tails')
//let Hbtn = document.querySelector('#Heads')
//Tbtn.addEventListener('click', addforplayer)
//Hbtn.addEventListener('click', addforplayer)
//outputing the winner
if (player === 5 && computer == 5) {
winner.innerHTML = `It's a Tie`;
} else if (player === 5) {
winner.innerHTML = `You Win!!!`;
} else if (computer === 5) {
winner.innerHTML = `Computer Wins!!!`;
}
}
html {
background-color: rgba(128, 128, 128, 0.712);
margin: 0;
padding: 0;
top: 0;
}
body {
/* overflow: hidden;
Hide scrollbars */
}
.PlayerSelected {
position: relative;
right: 150px;
font-family: 'Quantico', sans-serif;
}
.ComputerSelected {
position: relative;
left: 150px;
top: -43px;
font-family: 'Quantico', sans-serif;
}
.PlayerPoints {
position: relative;
left: -110px;
top: 109px;
font-family: 'Quantico';
}
.ComputerPoints {
position: relative;
right: -103px;
top: 60px;
font-family: 'Quantico';
}
.PlayersChoice {
color: rgba(19, 107, 207, 0.836);
background-color: black;
width: 0px;
position: relative;
left: -80px;
top: -37px
}
#Theoutput {
font-size: xx-large;
position: relative;
top: -120px
}
#ThePlayersPoints {
position: relative;
top: 23.5px;
width: 10px;
left: -75px;
font-family: 'Quantico';
}
#TheComputersPoints {
position: relative;
left: 150px;
top: -5px;
font-family: 'Quantico';
}
.ComputerChoice {
position: relative;
right: -250px;
color: red;
top: -90px
}
#Thewinner {
background-color: aqua;
width: 200px;
}
.H1 {
font-family: 'Kaushan Script', cursive;
text-shadow: 2px 2px rgba(255, 0, 0, 0.589);
}
#Heads {
outline: none;
border: none;
font-size: xx-large;
cursor: pointer;
}
#Tails {
outline: none;
border: none;
font-size: xx-large;
cursor: pointer;
}
#Tails:hover {
font-size: 50px;
background-color: rgba(0, 26, 255, 0.534);
box-shadow: 5px 10px gray;
}
#Heads:hover {
font-size: 50px;
background-color: rgba(255, 0, 0, 0.664);
box-shadow: -5px 10px gray;
}
.pickHeadsOrTalis {
font-family: 'Staatliches';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Light Switching</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
</style>
<style>
#import url('https://fonts.googleapis.com/css2?family=Quantico&display=swap');
</style>
<style>
#import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
</style>
</head>
<body>
<center>
<h1 class='H1'>First Player to 5 points wins!</h1>
<h3 class='PlayerSelected'>Player selected:</h3>
<div id='PlayersChoice' id='o' class='PlayersChoice'></div>
<h3 class='ComputerSelected'>Computer selected:</h3>
<div id='ComputerChoice' class='ComputerChoice '></div>
<h4 class='PlayerPoints'>Player:</h4>
<h4 class='ComputerPoints'> Computer: </h4>
<div class="PlayersAndComputersPoints">
<div id='ThePlayersPoints' class="ThePlayersPoints">0</div>
<div id='TheComputersPoints' class="TheComputersPoints">0</div>
</div>
<div id='Theoutput' class="output"></div>
<h1 id='Thewinner' class="winner"></h1>
<h1 class="pickHeadsOrTalis">Pick heads or tails?</h1>
<div id='allBtn' class="btnCon">
<button id='Heads' class="heads">Heads</button> <button id='Tails' class='talis'>Tails</button>
</div>
</center>
<script src="app.js"></script>
</body>
</html>

how can i create smooth seeker in my video player like youtube player

I have created a player and I expected it to be smooth as a youtube player. But my player is not that smooth. and it also gives some bug-like
If I mouse down the slider and mousemove it and it slides but after mouse up, it doesn't stop the slide on mousemove and it doesn't give the same result I expected
window.onload = function(){
var music = document.getElementById('music');
music.src = 'https://fr01.mp3snow.com/4d1c6fa75beebf67d9969/Charlie%20Puth%20-%20We%20Don%20t%20Talk%20Anymore%20feat.%20Selena%20Gomez.mp3'
setTimeout(()=>{
var play = document.getElementById('playpause')
//slider for music
var slider = document.getElementById('slider');
//slider Container for slider in music player
var sliderCon = document.getElementById('sliderCon');
var clicked = false;
var body = document.querySelector('body');
var timer = document.getElementById('time');
var durat = document.getElementById('duration');
sliderCon.onmousedown = (e) => {
music.currentTime = (e.offsetX/sliderCon.offsetWidth)*music.duration;
clicked = true;
}
window.onmousemove = (e) =>{
if(clicked == true){
music.currentTime = (e.offsetX/sliderCon.offsetWidth)*music.duration;
if(music.ended == true){
music.play()
}
body.style.cursor = 'grabbing' ;
}
window.onmouseup = () => {
clicked = false;
body.style.cursor = 'inherit';
}
}
function timing(totaltime){
if (totaltime>60){
var minute = Math.floor(totaltime/60)
var second = Math.floor(totaltime%60)
if(minute>9){
var time;
if (second >9){
time = minute+':'+second;
}else{
time = minute+':'+'0'+second;
}
}else if (minute<10){
var time;
if (second >9){
time = '0'+minute+':'+second;
}else{
time = '0'+minute+':'+'0'+second;
}
}
}
else{
if (totaltime<10){
var time = '00:0'+Math.floor(totaltime)
}else{
var time = '00:'+Math.floor(totaltime)
}
}
return time;
}
music.ontimeupdate = () =>{
var sliderWidth = (music.currentTime/music.duration)*100;
slider.style.width = sliderWidth+'%';
timer.innerHTML = timing(music.currentTime)
durat.innerHTML = timing(music.duration)
}
play.onselect = () =>{
document.click();
}
play.onclick = (e) => {
if(music.paused == true || music.ended == true){
music.play();
play.innerHTML = '<i class="fas fa-pause"></i>';
}else if (music.paused == false || music.ended == false){
music.pause();
play.innerHTML = '<i class="fas fa-play"></i>';
}
}
window.onkeydown = (key) => {
if (key.key == 'ArrowRight'){
music.currentTime += 5
}
if (key.key == 'ArrowLeft') {
music.currentTime -= 5
}
if (key.key == ' ') {
if(music.paused == true || music.ended == true){
music.play();
play.innerHTML = 'PAUSE';
}else if (music.paused == false || music.ended == false){
music.pause();
play.innerHTML = 'PLAY';
}
}
if (key.key == 'ArrowUp'){
if(music.volume < 1){
music.volume +=0.1;
}
}
if (key.key == 'ArrowDown'){
if(music.volume > 0.1){
music.volume -=0.1;
}
}
if (key.code == 'NumpadAdd'){
if (music.playbackRate < 2.0){
music.playbackRate += 0.1
}
}
if (key.code == 'NumpadSubtract'){
if (music.playbackRate > 0.1){
music.playbackRate -= 0.1
}
}
if (key.key == 'h'){
music.playbackRate = -1.0;
}
}
},0)
var loaded = document.getElementById('loaded');
console.log(loaded)
music.addEventListener('progress', function(e) {
setTimeout(()=>{
loaded.style.width = Math.round((this.buffered.end(0)/this.duration) * 100)+'%';
},6)
});
}
*{
margin: 0;
padding: 0;
}
body{
background-color: rgba(32, 29, 29, 0.89);
}
.playpause{
color: rgb(255, 248, 248);
left: 22%;
position: relative;
top: 16%;
font-size: 3rem;
font-family: sans-serif;
}
#duration{
color: rgb(255, 248, 248);
text-align: right;
margin-right: 5px;
font-size: 1rem;
font-family: sans-serif;
position: relative;
top: -1rem;
}
#time{
color: rgb(255, 248, 248);
text-align: left;
margin-left: 5px;
font-size: 1rem;
font-family: sans-serif;
}
#fornow{
background-color: rgb(116, 116, 150);
width: 80%;
margin: 50px auto;
height: 150px;
}
.sliderCon{
width: 90%;
margin: 0 auto;
position: relative;
top: 70px;
background-color: rgb(197, 192, 192);
height: 6px;
transition: 0.3s;
}
.slider{
position: relative;
height: 100%;
width: 0%;
transition: 0.3s;
background-color: rgb(228, 54, 54);
}
.sliderCon:hover{
height: 10px;
top: 67px;
cursor: grab;
}
.thumb{
width: 18px;
height: 18px;
background-color: rgb(228, 54, 54);
position: absolute;
margin-left: 98%;
border-radius: 50%;
margin-top: -5px;
transition: 0.3s;
pointer-events: none;
}
.sliderCon:hover .thumb{
margin-left: 97%;
width: 20px;
height: 20px;
}
#loaded{
background-color: rgba(226, 95, 95, 0.616);
position: absolute;
width: 0%;
height: 100%;
}
#loading{
width: 60px;
height: 60px;
background-color: transparent;
margin: 0 auto;
border: 5px solid;
border-color: teal;
transition: 1s;
border-radius: 50%;
animation: load 1s infinite;
animation-fill-mode: both;
border-top-color: tomato;
display: none;
}
#keyframes load{
to{
transform: rotate(360deg);
}
}
.yo{
width: 75px;
height: 75px;
background-color: cyan;
margin: 0 auto;
border-radius: 50%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Player</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<audio src="./" id="music"></audio>
<div class="player">
<div id="fornow">
<div class="sliderCon" id="sliderCon">
<div id="loaded">
</div>
<div class="slider" id="slider">
<div class="thumb" id="thumb"></div>
</div>
</div>
</div>
<div id="time">00:00</div>
<div id="duration">00:00</div>
<div id="loading">
</div>
<div class="controls">
<div class="backward"></div>
<div class="yo">
<div class="playpause" id="playpause"><i class="fas fa-play"></i></div>
</div>
<div class="forward"></div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
It is the Code You can run it and see that it is not smooth as youtube
and it is also declared that youtube player is not flash
so what is the secret of youtube players that I don't know?
Please tell me the answer if anyone knows. sorry This is my personal project so I didn't commented it or name it very well
Thank You

How do I align a video background to be centered without a cutoff?

Basically, I coded this player for my personal video hosting site (some elements censored in this example) but when I embed a video, it aligns to the left side and gets cut off at the right side or has a black bar there if the ratio is off.
(I embedded a video from Archive.org for this example, it is by no means my own. It appears to belong to Scott Draves.)
function vidplay() {
var video = document.getElementById("SubjectVideo");
var button = document.getElementById("play");
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function restart() {
var video = document.getElementById("SubjectVideo");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("SubjectVideo");
video.currentTime += value;
}
function hideControls() {
var x = document.getElementById("controls");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
background-color: black;
}
#SubjectVideo {
position: fixed;
height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
#Data {
display: flex;
flex-wrap: wrap;
}
.EpisodeData {
text-align: right;
flex: 50%;
}
#hideButtons {
text-align: left;
flex: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>[Video title]</title>
<link rel="icon" href="../../../../favicon.ico" type="image/png" sizes="16x16">
<link rel="stylesheet" href="../../../player.css">
<script src="../../../RedirectScripts/redirect.js"></script>
<script src="../../../player.js"></script>
</head>
<body id="main" onLoad="hideControls()">
<video autoplay id="SubjectVideo" onended="NextVideo()">
<source src="https://ia801507.us.archive.org/35/items/electricsheep-flock-247-52500-0/00247%3D52640%3D52374%3D52639.mp4" type="video/mp4">
Your browser doesn't support < video >..
</video>
<div class="content">
<div id="controls">
<div id="buttonbar">
<p><center><img src="../../logo.png" width="20%"></p>
<button id="restart" onclick="restart();"><img src="../../../restart.png" alt="restart"></button>
<button id="rew" onclick="skip(-30)"><img src="../../../rewind.png" alt="rewind 30s"></button>
<button id="play" onclick="vidplay()"><img src="../../../play.png" alt="play/pause"></button>
<button id="fastFwd" onclick="skip(30)"><img src="../../../fastforward.png" alt="fast-forward 30s"></button>
</div>
</div>
<div id="Data">
<div class="hideButtons">
<button id="hide" onclick="hideControls()">Show/Hide Controls</button>
</div>
<div class="EpisodeData">
Video Title
</div>
</div>
</div>
</body>
</html>
When I insert a tag around the video, it puts the left edge of the video on the edge instead of properly centering it.
does anyone know how I could effectively center it, and put borders on the bottom and top instead of having a cutoff on the sides?
The error at the end is for an autoplay script that isn't linked here, it can be disregarded.

Add the next styles to the video tag
left: 0;
right: 0;
margin: auto;

Add this #SubjectVideo ruleset to center your <video> tag:
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
It should look like this:
#SubjectVideo {
position: fixed;
height: 100%;
margin-right: auto;
margin-left: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

The square does not move JavaScript

I'm creating a game, the div with id "playerDiv" when I hit the space bar it should start going up but it doesn't. So I would like when I hit the space bar the div would go up high.
could you help me? could you also report me the mistakes i made?
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 420 + inc;
player.top = player.top + x;
inc++
playerTimeOut = setTimeout(jump, 50);
}
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
if (key.key === ' ') {
jump();
}
}
body {
background-color: #222222;
}
#background {
border: solid 2px #dddddd;
width: 800px;
height: 500px;
}
#playerDiv {
background-color: #aaaaaa;
width: 60px;
height: 80px;
position: relative;
top: 420px;
left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Game</title>
</head>
<body>
<div id="background">
<div id="playerDiv">
</div>
</div>
</body>
<script src="script.js"></script>
</html>

You're not passing the argument in addListener and you're not using correctly the top property, it belongs to style and needs unit , for example px
Also keyCode is deprecated, use key instead
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 10 + inc;
player.style.bottom = `${x}px`
inc++
console.log(player.style.bottom)
}
//window.addEventListener("keydown", e => e.key === "(Space Character)" ? jump() : '');
//For snippet only
jump()
setTimeout(() => jump(), 1000)
* {
/* demo */
box-sizing: border-box
}
body {
background-color: #222;
}
#background {
border: solid 2px #ddd;
width: 800px;
height: 500px;
position: relative;
/* demo */
max-width: 100%
}
#playerDiv {
background-color: #aaa;
width: 60px;
height: 80px;
position: absolute;
bottom: 0px;
left: 10px;
}
<div id="background">
<div id="playerDiv">
</div>
</div>

Try this:
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 10 + inc;
let style = window.getComputedStyle(player);
player.style.top = (parseInt(style.getPropertyValue('top'),10) - x) + 'px';
inc++
}
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
if (key.keyCode == "32") {
jump();
}
}
body {
background-color: #222222;
}
#background {
border: solid 2px #dddddd;
width: 800px;
height: 500px;
}
#playerDiv {
background-color: #aaaaaa;
width: 60px;
height: 80px;
position: relative;
top: 420px;
left: 10px;
}
<div id="background">
<div id="playerDiv">
</div>
</div>

javascript add a click event to an underlayered element

I'm learning javascript and I've faced with a strange case while doing the gallery example in the MDN. I decided to add a simple function to this example but it didn't work. My goal is to add a function to the ".displayed-img" img.
I know that the issue is because of the "overlay" div. and I can run my function when I comment that line in the HTML. But I wonder what would be the best approach when I have a case like this and I need to access to an object which sits beneath another one. Thanks.
Here is my code:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
var btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
var imgUrl, currentImgUrl;
/* Looping through images */
for (var i = 0; i < 5; i++) {
imgUrl = 'https://via.placeholder.com/640x48'+(i+1)+'.jpg';
var newImage = document.createElement('img');
newImage.setAttribute('src', imgUrl);
thumbBar.appendChild(newImage);
newImage.addEventListener ('click', function(e){
displayedImage.setAttribute('src', e.target.getAttribute('src'));
} );
}
displayedImage.addEventListener('click', sayHi);
function sayHi(){
console.log('hi');
}
btn.onclick = function() {
if (btn.getAttribute('class')==='dark') {
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
btn.textContent = 'Light';
btn.setAttribute('class', 'light');
} else {
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
btn.textContent = 'Darken';
btn.setAttribute('class', 'dark');
}
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0, 0, 0, 0);
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="https://via.placeholder.com/640x480">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div>
<script src="main.js"></script>
</body>
</html>