We Keep Coding

Counter Observe when I scroll

Problem
I created a counter using HTML, CSS and JS (such as satisfied customer numbers, branch numbers, etc.)
The counter is also animated but since it's down the page, I'd like to animate it only when it gets to that point on the page. How do I do with the js?
const counters = document.querySelectorAll('.value');
const speed = 400;
counters.forEach( counter => {
const animate = () => {
const value = +counter.getAttribute('akhi');
const data = +counter.innerText;
const time = value / speed;
if(data < value) {
counter.innerText = Math.ceil(data + time);
setTimeout(animate, 1);
}else{
counter.innerText = value;
}
}
animate();
});
.counter-box {
display: block;
background: #f6f6f6;
padding: 40px 20px 37px;
text-align: center
}
.counter-box p {
margin: 5px 0 0;
padding: 0;
color: #909090;
font-size: 18px;
font-weight: 500
}
.counter {
display: block;
font-size: 32px;
font-weight: 700;
color: #666;
line-height: 28px
}
.counter-box.colored {
background: #eab736;
}
.counter-box.colored p,
.counter-box.colored .counter {
color: #fff;
}
<div class="container">
<div class="row contatore">
<div class="col-md-4">
<div class="counter-box colored">
<span class="counter value" akhi="560">0</span>
<p>Countries visited</p>
</div>
</div>
<div class="col-md-4">
<div class="counter-box">
<span class="counter value" akhi="3275">0</span>
<p>Registered travellers</p>
</div>
</div>
<div class="col-md-4">
<div class="counter-box">
<span class="counter value" id="conta" akhi="289">0</span>
<p>Partners</p>
</div>
</div>
</div>
</div>
What I have tried
i had tried with
const target = document.querySelector('.counter');
observer.observe(target);
but it doesn't seem to work. Many thanks to whoever can help me.

I would recommend, as others have suggested, to use the Intersection Observer API to animate your elements once they appear in the viewport.
The idea is simple, we'll create an observer that will observe the counters to animate and we're going to configure it so that it calls the animate function once a counter is fully visible in the viewport.
You may learn more about the options that an IntersectionObserver can accept in order to customize its behavior. Meanwhile, here's a live demo that illustrates how to make the counters animate once they appear in the screen (the code below has some helpful comments):
const counters = document.querySelectorAll('.value'),
speed = 400,
/**
* create an IntersectionObserver with the specified callback that will be executed for each intersection change for every counter we have.
* You may customize the options (2nd argument) per you requirement
*/
observer = new IntersectionObserver(
entries => entries.forEach(entry => entry.isIntersecting && animate(entry.target)),
{
threshold: 1 // tells the browser that we only need to execute the callback only when an element (counter) is fully visible in the viewport
}
),
// the animate function now accepts a counter (HTML element)
animate = counter => {
const value = +counter.dataset.akhi,
data = +counter.innerText,
time = value / speed;
if (data < value) {
counter.innerText = Math.ceil(data + time);
setTimeout(() => animate(counter), 1);
} else {
counter.innerText = value;
}
};
// attach the counters to the observer
counters.forEach(c => observer.observe(c));
.counter-box {
display: block;
background: #f6f6f6;
padding: 40px 20px 37px;
text-align: center
}
.counter-box p {
margin: 5px 0 0;
padding: 0;
color: #909090;
font-size: 18px;
font-weight: 500
}
.counter {
display: block;
font-size: 32px;
font-weight: 700;
color: #666;
line-height: 28px
}
.counter-box.colored {
background: #eab736;
}
.counter-box.colored p,
.counter-box.colored .counter {
color: #fff;
}
<div class="container">
<div class="row contatore">
<div class="col-md-4">
<div class="counter-box colored">
<!-- it is recommended to use "data-*" attributes to cache data that we might use later. The "data-akhi" contains the number to animate -->
<span class="counter value" data-akhi="560">0</span>
<p>Countries visited</p>
</div>
</div>
<div class="col-md-4">
<div class="counter-box">
<span class="counter value" data-akhi="3275">0</span>
<p>Registered travellers</p>
</div>
</div>
<div class="col-md-4">
<div class="counter-box">
<span class="counter value" id="conta" data-akhi="289">0</span>
<p>Partners</p>
</div>
</div>
</div>
</div>

As others suggested, you should use Intersection Observer.
This is how I'd do:
Scrolldown the snippet in order to see the counter animating up once is on the screen.
const counters = document.querySelectorAll('.value');
const speed = 400;
const observer = new IntersectionObserver( items => {
if(items[0].isIntersecting) {
const target = items[0].target;
const animate = () => {
const value = + target.getAttribute('akhi');
const data = + target.innerText;
const time = value / speed;
if(data < value) {
target.innerText = Math.ceil(data + time);
setTimeout(animate, 1);
}else{
target.innerText = value;
}
}
animate();
observer.unobserve(target);
}
})
counters.forEach( counter => observer.observe(counter));
.counter-box {
display: block;
background: #f6f6f6;
padding: 40px 20px 37px;
text-align: center
}
.counter-box p {
margin: 5px 0 0;
padding: 0;
color: #909090;
font-size: 18px;
font-weight: 500
}
.counter {
display: block;
font-size: 32px;
font-weight: 700;
color: #666;
line-height: 28px
}
.counter-box.colored {
background: #eab736;
}
.counter-box.colored p,
.counter-box.colored .counter {
color: #fff;
}
<div style="height: 600px;">
</div>
<div class="container">
<div class="row contatore">
<div class="col-md-4">
<div class="counter-box colored">
<span class="counter value" akhi="560">0</span>
<p>Countries visited</p>
</div>
</div>
<div class="col-md-4">
<div class="counter-box">
<span class="counter value" akhi="3275">0</span>
<p>Registered travellers</p>
</div>
</div>
<div class="col-md-4">
<div class="counter-box">
<span class="counter value" id="conta" akhi="289">0</span>
<p>Partners</p>
</div>
</div>
</div>
</div>

How would I use the user uploaded image as the background image for the sliding puzzle I am working on?

I am attempting to make it so that when a user uploads the image file it is automatically used as the background image in the puzzle. I have tried looking up how I would do that and I feel like it would be that hard but I'm just having a brain fart. I am also looking to start a timer once the image gets uploaded but I feel like that is something I ould probably be able to figure out myself but any tips would certainly be appreciated.
html:
<!DOCTYPE html>
<html>
<head>
<script src="functions.js"></script>
<link rel="stylesheet" href="design.css" type="text/css">
<meta charset="UTF-8">
<title>Puzzle</title>
</head>
<body>
<div class="file-upload">
<input class="file-upload__input" type="file" name="picture" id="picture" accept="image/*">
<button class="file-upload__button" type="button">Choose a Photo</button>
<span class="file-upload__label"></span>
</div>
<!--button formating-->
<script>
Array.prototype.forEach.call(document.querySelectorAll(".file-upload__button"), function(button) {
const hiddenInput = button.parentElement.querySelector(".file-upload__input");
const label = button.parentElement.querySelector(".file-upload__label");
const defaultLabelText = "No file(s) selected";
// Set default text for label
label.textContent = defaultLabelText;
label.title = defaultLabelText;
button.addEventListener('click', function(){
hiddenInput.click();
});
hiddenInput.addEventListener('change', function(){
const filenameList = Array.prototype.map.call(hiddenInput.files, function (file){
return file.name;
});
label.textContent = filenameList.join(', ') || defaultLabelText;
label.title = label.textContent;
});
});
</script>
<!--Puzzle-->
<center><div id="table" style="display: table;">
<div id="row1" style="display: table-row;">
<div id="cell11" class="tile1" onClick="clickTile(1,1);"></div>
<div id="cell12" class="tile2" onClick="clickTile(1,2);"></div>
<div id="cell13" class="tile3" onClick="clickTile(1,3);"></div>
</div>
<div id="row2" style="display: table-row;">
<div id="cell21" class="tile4" onClick="clickTile(2,1);"></div>
<div id="cell22" class="tile5" onClick="clickTile(2,2);"></div>
<div id="cell23" class="tile6" onClick="clickTile(2,3);"></div>
</div>
<div id="row3" style="display: table-row;">
<div id="cell31" class="tile7" onClick="clickTile(3,1);"></div>
<div id="cell32" class="tile8" onClick="clickTile(3,2);"></div>
<div id="cell33" class="tile9" onClick="clickTile(3,3);"></div>
</div>
</div>
<button onClick="shuffle();">New Game</button>
</center>
</body>
</html>
CSS:
body {
background: #002a3f;
}
.file-upload {
display: inline-flex;
align-items: center;
font-size: 20px;
}
.file-upload__input {
display: none;
}
.file-upload__button {
-webkit-appearance: none;
background: #009879;
border: 2px solid #00745d;
border-radius: 4px;
outline: none;
padding: 0.5em 0.8em;
margin-right: 15px;
color: white;
font-size: 1em;
font-family: sans-serif;
font-weight: bold;
cursor: pointer;
}
.file-upload__button:active{
background: #00745d;
}
.file-upload__label{
max-width: 250px;
font-size: 0.95em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, .tile8, .tile9 {
display: table-cell;
width: 120px;
height: 120px;
border: 1px solid rgb(100, 100, 100);
background: url();
cursor: pointer;
}
.tile1 {background-position: left top;}
.tile2 {background-position: center top;}
.tile3 {background-position: right top;}
.tile4 {background-position: left center;}
.tile5 {background-position: center center;}
.tile6 {background-position: right center;}
.tile7 {background-position: left bottom;}
.tile8 {background-position: center bottom;}
.tile9 {background: rgb(58, 58, 58); cursor: default;}
JS:
function swapTiles(cell1,cell2) {
var temp = document.getElementById(cell1).className;
document.getElementById(cell1).className = document.getElementById(cell2).className;
document.getElementById(cell2).className = temp;
}
function shuffle() {
//Use nested loops to access each cell of the 3x3 grid
for (var row=1;row<=3;row++) { //For each row of the 3x3 grid
for (var column=1;column<=3;column++) { //For each column in this row
var row2=Math.floor(Math.random()*3 + 1); //Pick a random row from 1 to 3
var column2=Math.floor(Math.random()*3 + 1); //Pick a random column from 1 to 3
swapTiles("cell"+row+column,"cell"+row2+column2); //Swap the look & feel of both cells
}
}
}
function clickTile(row,column) {
var cell = document.getElementById("cell"+row+column);
var tile = cell.className;
if (tile!="tile9") {
//Checking if white tile on the right
if (column<3) {
if ( document.getElementById("cell"+row+(column+1)).className=="tile9") {
swapTiles("cell"+row+column,"cell"+row+(column+1));
return;
}
}
//Checking if white tile on the left
if (column>1) {
if ( document.getElementById("cell"+row+(column-1)).className=="tile9") {
swapTiles("cell"+row+column,"cell"+row+(column-1));
return;
}
}
//Checking if white tile is above
if (row>1) {
if ( document.getElementById("cell"+(row-1)+column).className=="tile9") {
swapTiles("cell"+row+column,"cell"+(row-1)+column);
return;
}
}
//Checking if white tile is below
if (row<3) {
if ( document.getElementById("cell"+(row+1)+column).className=="tile9") {
swapTiles("cell"+row+column,"cell"+(row+1)+column);
return;
}
}
}
}

You can use client's image without ever uploading it. The way to do that is to use FileReader API. Check out Mozilla's tutorial of FileReader.readAsDataURL().

I Want to connect an HTML Element To a javascript Object

For every product's <img> element on the page, I want to create an associated JavaScript object with attributes of title, description and price. When the <img> is clicked, it should show a modal based on a HTML template with the fields populated by these attributes.
Here is my current code:
document.getElementById("red").onclick = function() {functionRed()};
document.getElementById("yellow").onclick = function() {functionYellow()};
document.getElementById("blue").onclick = function() {functionBlue()};
// Create an object:
var Blue = {Title:"BlueIsTheNewBlack", Price:"500", Description:"This blue is the best color"}
var Yellow = {Title:"YellowIsTheNewBlack", Price:"900", Description:"This yellow is the best color"}
var Red = {Title:"RedIsTheNewBlack", Price:"100", Description:"This red is the best color"}
function functionRed() {
document.getElementById('id01').style.display='block';
// Display some data from the object:
document.getElementById("TitleModal").innerHTML = Red.Title;
document.getElementById("PriceModal").innerHTML = Red.Price;
document.getElementById("DescriptionModal").innerHTML = Red.Description;
}
function functionYellow() {
document.getElementById('id01').style.display='block';
// Display some data from the object:
document.getElementById("TitleModal").innerHTML = Yellow.Title;
document.getElementById("PriceModal").innerHTML = Yellow.Price;
document.getElementById("DescriptionModal").innerHTML = Yellow.Description;
}
function functionBlue() {
document.getElementById('id01').style.display='block';
// Display some data from the object:
document.getElementById("TitleModal").innerHTML = Blue.Title;
document.getElementById("PriceModal").innerHTML = Blue.Price;
document.getElementById("DescriptionModal").innerHTML = Blue.Description;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div style="background-color:red; width:50px; height:50px; float: left;" id="red"></div>
<div style="background-color:blue; width:50px; height:50px; float: left;" id="blue"></div>
<div style="background-color:yellow; width:50px; height:50px; float: left;" id="yellow"></div>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<h2 id="TitleModal">Some text. Some text. Some text.</h2>
<h2 id="PriceModal">Some text. Some text. Some text.</h2>
<p id="DescriptionModal">Some text. Some text. Some text.</h2>
</div>
</div>
</div>
</div>
Thanks to everybody.

Is that what you expect ?
const SquareColors
= document.getElementById('ColorsChoices')
, SquareMessage
= { onRed : { Title: 'RedIsTheNewBlack', Price: '100', Description: 'This red is the best color' }
, onBlue : { Title: 'BlueIsTheNewBlack', Price: '500', Description: 'This blue is the best color' }
, onYellow : { Title: 'YellowIsTheNewBlack', Price: '900', Description: 'This yellow is the best color' }
}
, Modal_info
= document.getElementById('idModal')
;
Modal_info.show=_=>Modal_info.classList.remove('noDisplay')
Modal_info.hide=_=>Modal_info.classList.add('noDisplay')
idModal.onclick=e=>
{
if (!e.target.matches('#close-button, #idModal')) return
e.preventDefault()
Modal_info.hide()
}
const TitleModal = document.getElementById('TitleModal')
, PriceModal = document.getElementById('PriceModal')
, DescriptionModal = document.getElementById('DescriptionModal')
;
SquareColors.onclick=e=>
{
if (!e.target.matches('.colorButton')) return
let inColor = e.target.id
TitleModal.textContent = SquareMessage[inColor].Title
PriceModal.textContent = SquareMessage[inColor].Price
DescriptionModal.textContent = SquareMessage[inColor].Description
Modal_info.show()
}
nav#ColorsChoices div {
width : 50px;
height: 50px;
float : left;
}
#onRed { background-color: red }
#onBlue { background-color: blue }
#onYellow { background-color: yellow }
.noDisplay { display: none }
#idModal {
z-index: 3;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,0.4);
}
#idModal > div {
position: relative;
display: block;
width: 30em;
margin: 5em auto;
background-color: #fff;
padding: 1em;
}
#close-button {
position: absolute;
top: 0;
right: .3em;
cursor: pointer;
font-size: 2em;
font-weight: bold;
}
#close-button:hover { color: crimson; }
<nav id="ColorsChoices">
<div class="colorButton" id="onRed"></div>
<div class="colorButton" id="onBlue"></div>
<div class="colorButton" id="onYellow"></div>
</nav>
<div id="idModal" class="noDisplay">
<div>
<span id="close-button">×</span>
<h2 id="TitleModal">Some text. </h2>
<h2 id="PriceModal">Some text. </h2>
<p id="DescriptionModal">Some text. </h2>
</div>
</div>

Update text of an element when another element property changes

I get a code from other app that changes progress. Based on progress bar width property, can I change progress text?
I want an event that update the progress-indicator-text when progress-indicator-bar width changes. Code here:
$(function() {
//For demo purpose only
$('button').click(function() {
var percentWidth = $('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100;
if (percentWidth < 100) $('.progress-indicator-bar').width(percentWidth + 10 + "%");
})
//Requires appropriate event/approach to change the text of .progress-indicator-text when width of .progress-indicator-bar changes.
$('.progress-indicator-bar').change(function() {
$('.progress-indicator-text').html($('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100 + "%");
})
});
.progress-indicator-bar-holder {
width: 100px;
height: 10px;
background: #e4e4e4;
float: left;
}
.progress-indicator-bar {
background: #008000;
height: 10px;
}
.progress-indicator-text {
font-weight: bold;
font-size: 11px;
line-height: 8px;
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This code embeds from another application -->
<div class="progress-indicator">
<div class="progress-indicator-bar-holder">
<div class="progress-indicator-bar" style="width: 30%;"></div>
</div>
</div>
<!-- Based on progress-indicator-bar width the progress-indicator-text should change -->
<div class="progress-indicator-text">30%</div>
<br>
<button>Change</button>

It's a bit like breaking a butterfly on a wheel but you can utilize the MutationObserver API to watch for changes in the DOM.
Just register the div holding the percentage bar and whenever it's style attribute changes update the div containing the text.
Here's an example:
//For demo purpose only
$('button').click(function() {
var percentWidth = $('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100;
if (percentWidth < 100) $('.progress-indicator-bar').width(percentWidth + 10 + "%");
})
var target = document.getElementsByClassName('progress-indicator-bar');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName == "style") {
$('.progress-indicator-text').html($('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100 + "%");
}
});
});
var config = {
attributes: true,
childList: true,
characterData: true
};
observer.observe(target[0], config);
.progress-indicator-bar-holder {
width: 100px;
height: 10px;
background: #e4e4e4;
float: left;
}
.progress-indicator-bar {
background: #008000;
height: 10px;
}
.progress-indicator-text {
font-weight: bold;
font-size: 11px;
line-height: 8px;
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-indicator">
<div class="progress-indicator-bar-holder">
<div class="progress-indicator-bar" style="width: 30%;"></div>
</div>
</div>
<!-- Based on progress-indicator-bar width the progress-indicator-text should change -->
<div class="progress-indicator-text">30%</div>
<br>
<button>Change</button>

You can trigger events in jQuery with the .trigger method when you are in a handler.
$(function() {
//For demo purpose only
$('button').click(function() {
var percentWidth = $('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100;
if (percentWidth < 100) $('.progress-indicator-bar').width(percentWidth + 10 + "%");
$('.progress-indicator-bar').trigger('change') // i added this line
})
//Requires appropriate event/approach to change the text of .progress-indicator-text when width of .progress-indicator-bar changes.
$('.progress-indicator-bar').change(function() {
$('.progress-indicator-text').html($('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100 + "%");
})
});
.progress-indicator-bar-holder {
width: 100px;
height: 10px;
background: #e4e4e4;
float: left;
}
.progress-indicator-bar {
background: #008000;
height: 10px;
}
.progress-indicator-text {
font-weight: bold;
font-size: 11px;
line-height: 8px;
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This code embeds from another application -->
<div class="progress-indicator">
<div class="progress-indicator-bar-holder">
<div class="progress-indicator-bar" style="width: 30%;"></div>
</div>
</div>
<!-- Based on progress-indicator-bar width the progress-indicator-text should change -->
<div class="progress-indicator-text">30%</div>
<br>
<button>Change</button>

you can use the ResizeSensor to detect the width change of the element.
please refer this page How to detect DIV's dimension changed?

hover in css have does no effect when element is hoverd

So I made a bunch of divs stacked on each other, and I want each div to change its background color whenever its hover, but that's not what happens
When I hover an item its background color should change to green,
but it doesn't work even that I wrote div.oldiv:hover{background-color: #48FF0D;}
The problem is probably in CSS code.
Here is a snippet :
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;}
div.oldiv:hover{
background-color: #48FF0D;
}
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l{
float: right;
}
<body>
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
window.onload = function (){
document.getElementById("bigdiv").innerHTML = b;
document.getElementById("bigdiv2").innerHTML = k;
}
function utd(a){
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0){
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
}else{
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
</div>
<div id="bigdiv2">
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>
</body>
Don't word about all the Javascript, its just to generate elements and adding them to HTML

I have no idea what the purpose of this code is, but I think I have fixed it..... Whatever it is :P
Your #bigdiv and #bigdiv2 percentage height were not working because the height of the document wasn't 100%. So I just added html, body {height:100%;} to fix that.
/* code added START */
html, body {
height:100%;
}
div.oldiv:hover {
background-color: #48FF0D!important;
}
/* code added END */
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;
}
/* div.oldiv:hover{background-color: #48FF0D;} */
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l {
float: right;
}
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
function utd(a) {
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0) {
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
} else {
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
<script>document.write(b);</script>
</div>
<div id="bigdiv2">
<script>document.write(k);</script>
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>

Well, there is no use of Javascript here. I'm not able to understand what problem you're facing but refer here : https://www.w3schools.com/cssref/sel_hover.asp
CSS already has property of hover and can be used like element:hover {your properties inside like whatever event has to be happened on hover}. There is no need to use JS here. Hope this helps.
UPDATE:
I would also suggest you to follow good practice of writing JS code and CSS code in a separate file not in a HTML file.