I want to have multiple buttons use the same function. Here What I'm trying to do.
<button><a herf="#" onClick="myFunction('clk1',c1);">button</a></button>
<p id="clk1"></p>
With the buttons I want to change the variable and change the paragraph
<script>
var c1 = 0;
function myFunction(paragraph,varibl) {
varibl += 1;
document.getElementById(paragraph).innerHTML = varibl;
}
</script>
I've looked around and can't find any thing. this doesn't work and I don't know how to make it work.
the full code:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<title>clicker clicker</title>
<style>
html {
text-align: center;
background-color: #d1d1d1;
font-family:Verdana;
}
.onebutton {
background-color: #f4f4f4;
border: 2px solid #5b5b5b;
color: #5b5b5b;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 32px;
cursor: pointer;
border-radius: 8px;
box-shadow:inset 0px 12px 22px 2px #ffffff;
}
.onebutton:active {
background-color: #e5e5e5;
}
.twobutton {
background-color: #f4f4f4;
border: 2px solid #5b5b5b;
color: #5b5b5b;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
box-shadow:inset 0px 12px 22px 2px #ffffff;
}
.twobutton:active {
background-color: #e5e5e5;
}
</style>
</head>
<body>
<h1>Clicker Clicker</h1>
<p id="number"></p>
<button class="onebutton"><a herf="#" onClick="clc();">click</a>
</button>
<br>
<p>clicker:100</p>
<button class="twobutton"><a herf="#"
onClick="upgrade('clk1',c1);">buy</a></button>
<p id="clk1"></p>
<p>clicker:1000</p>
<button class="twobutton"><a herf="#" onClick="upgrade('clk2',c2);">buy</a></button>
<p id="clk2"></p>
<script>
var number = 0;
var c1 = 0;
var c2 = 0;
document.getElementById("number").innerHTML = number;
function clc() {
number += 1;
document.getElementById("number").innerHTML = number;
}
function update() {
number += c1;
document.getElementById("number").innerHTML = number;
c1 += c2;
document.getElementById("clk1").innerHTML = c1;
}
function upgrade(what,clicker) {
window[clicker] += 1;
document.getElementById(what).innerHTML = clicker;
}
setInterval(update, 100);
</script>
</body>
</html>
this is here so it doesnt say i have to much code sdljnvaksjdnfblkajsdbfjmas dbfmha bsdmnfb admsf bds msadf
User can use object for easy modification of values inside function
<button><a herf="#" onClick="myFunction('clk1','c1');">button</a></button>
<p id="clk1"></p>
..
<button><a herf="#" onClick="myFunction('clk1','c2');">button</a></button>
<p id="clk1"></p>
..
<button><a herf="#" onClick="myFunction('clk1','c3');">button</a></button>
<p id="clk1"></p>
and the script
<script>
var c = {c1: 0, c2: 0, c3: 0}
function myFunction(paragraph,varibl) {
c[varibl] = c[varibl] + 1
document.getElementById(paragraph).innerHTML = c[varibl];
}
</script>
If you have to pass the variable using the signature and can't simply (as per the other answers) directly reference the correct one in the function, here's what you do.
JS always passes a variable by value, not reference. However, if you send an object, the "value" is actually a reference to the original object. So you can do something like this:
var counters = { a: 0 };
function test(key) {
counters[key]++;
console.log(counters);
}
<button onclick="test('a')">Click</button>
do this:
<button><a herf="#" onClick="myFunction('clk1');">button</a></button>
<p id="clk1"></p>
and then:
<script>
var c1 = 0;
function myFunction(paragraph) {
c1++;
document.getElementById(paragraph).innerHTML = c1;
}
</script>
each time you call this method, the variable goes up by one!
jsfiddle
<body>
<button><a herf="#" onClick="myFunction('clk1','c1');">Para 1</a></button>
<p id="clk1"></p>
<button><a herf="#" onClick="myFunction('clk2','c2');">Para 2</a></button>
<p id="clk2"></p>
<button><a herf="#" onClick="myFunction('clk3','c3');">Para 3</a></button>
<p id="clk3"></p>
<script>
var c = {c1:0, c2:0, c3:0};
function myFunction(paragraph,varibl) {
document.getElementById(paragraph).innerHTML = ++c[varibl];
}
</script>
</body>
Related
here's what happened. i was trying to develop a clicker game using html and css and js but the setInterval was not working while my console is going blank as if there were no errors.
first, i tried putting the function on top because last time when i put the var like this
setInterval(gg, cps)
let cps=0;
function upgrade2() {
removec(cpctwo*2)
newlv2()
cps-=99000;
}
function gg() {
document.getElementById("coins").innerHTML ++;
}
the console errored last time when i was using that so then i changes the var from the bottom to the top.
this is my current code html:
<div id="coin">
<h2> <code>$</code><code id="coins">0</code>
</h2>
<img src="https://st3.depositphotos.com/3027583/16082/v/950/depositphotos_160820424-stock-illustration-pixel-art-golden-coin-retro.jpg?forcejpeg=true" width="50" height="50" onclick="addc(cpc)">
</div>
<div id="upgrade">
<div id="morecoins"> Coins Lv
<span id="level">1</span>
<br> Cost:<span id="cost">0.5</span><br>
<button class="upgbtn" onclick="upgrade()">Upgrade
</button>
</s>
</div>
<div id="cps"> Income Lv
<span id="level2">1</span>
<br> Cost:<span id="cost2">2</span><br>
<button class="upgbtn" onclick="upgrade2()">Upgrade
</button>
</div>
</div>
<br>
<script src="scripts.js"></script>
<hr>
moreinfo:
<br><br>
New Update:<br>
1. turned "coins:" into "$"
<br>
2. new upgrade income/coins per second gui
<br>3. removed "title" <br>
fixed income upgrade cost and lv
<br><br>
engine version: V1.6
<br><br>
Heping Yang/Gleacc Corp
css:
#coin {
text-align: center;
}
.upgbtn {
padding: 4px 16px;
border: solid black 3px;
background: green;
border-radius: 12px;
}
#morecoins {
padding: 8px 12px;
border: solid black 3px;
background: yellowgreen;
border-radius: 12px;
}
#cps {
padding: 8px 12px;
border: solid black 3px;
background: yellowgreen;
border-radius: 12px;
}
js:
var coins = 0;
var cpc = 1;
var cpctwo = 1;
var lv = 1;
var cps = 100000;
function upgrade2() {
removec(cpctwo*2)
newlv2()
cps-=99000;
}
function gg() {
document.getElementById("coins").innerHTML ++;
}
setInterval(gg, cps);
function addc(x) {
coins += x;
var coinshtml = (document.getElementById("coins").innerHTML = `${coins}`);
}
function removec(x) {
coins -= x;
var coinsnewnew = (document.getElementById("coins").innerHTML = `${coins}`);
}
function newlv() {
lv += 1;
cpc +=24;
document.getElementById("cost").innerHTML = `${cpc/2}`;
document.getElementById("level").innerHTML = `${lv}`;
}
function upgrade() {
removec(cpc/2)
newlv()
}
let lv2 = 1;
function newlv2() {
lv2 += 1;
cpctwo +=8;
cps;
document.getElementById("cost2").innerHTML = `${cpctwo*2}`;
document.getElementById("level2").innerHTML = `${lv2}`;
}
Instead of .innerHTML method, add .textContent method so when you add a new coin the cast doesn't read the html so it won't output NaN. Instead, with .textContent method it will only get the text, for example, '5', and it will cast it without problems.
I created this color guessing game from scratch using HTML, CSS and JS. You're given a random RGB value and you guess which out of three given colors is the correct one. Now I want to take it a step higher by adding a scoreboard and score (Which I'm not sure how to do at all) and a full-screen congratulation message when you guess the color right. I've tried doing that but the animation doesn't seem to work.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>Document</title>
</head>
<body>
<h1 class="text-centered" id="main-h1">Guess The Color!</h1>
<h2 class="text-centered" id="colorguess"></h2>
<p id="score">
</p>
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="bravo">
<p id="bravo-text">
BRAVO
</p>
</div>
</body>
<script src="script.js"></script>
</html>
CSS
*{
box-sizing: border-box;
}
body{
font-family: arial;
background-color: #1c1874;
color: rgb(105, 105, 139);
color: #fff;
}
.text-centered{
text-align: center;
text-shadow: 0px 2px 2px rgba(150, 150, 150, 1);
}
.box-container{
padding: 200px;
align-self: center;
display: flex;
flex-direction: row;
justify-content:space-evenly;
}
.box{
width: 200px;
height: 200px;
border-radius: 20px;
cursor: pointer;
border:5px solid #ffffff;
}
#score{
font-weight: 500;
font-size: 2em;
position: fixed;
top: 5%;
left: 5%;
}
#score::before {
content: "Score: ";
}
#bravo{
position: fixed;
display: none;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
font-size: 5em;
background-color: rgba(4, 8, 97, 0.69);
}
#bravo-text{
flex: 0 0 120px;
text-shadow: 0px 2px 2px rgba(150, 150, 150, 1);
}
JS
function getrandomcolor(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
rgb = "rgb("+r+", "+g+", "+b+")";
return rgb;
}
function gamestart(){
var mainh1 = document.getElementById('main-h1');
mainh1.innerHTML = "Guess the color!";
rgbvaluetrue = getrandomcolor();
var rgb = document.getElementById('colorguess');
rgb.innerHTML = rgbvaluetrue;
var body = document.getElementsByTagName('body');
var box = document.getElementsByClassName('box');
var scoreboard= document.getElementById('score');
var score = 0;
function displaybravo(element){
var op= 0;
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
if(op>=0.1){
element.style.display = "flex";
element.style.flexDirection = "column";
element.style.justifyContent = "center";
element.style.alignItems="center";
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 10);
}
for(var i=0;i<box.length;i++){
box[i].style.backgroundColor = getrandomcolor();
}
//here I am trying to assign the initial rgb value to one of the divs randomly
var rand = Math.floor(Math.random() * box.length);
box[rand].style.backgroundColor = rgbvaluetrue;
//here I check if the div you clicked on is correct
function markSelection() {
if(this.style.backgroundColor == rgbvaluetrue) {
mainh1.innerHTML="BRAVO";
setTimeout(function() {
var brv = document.getElementById('bravo');
displaybravo(brv);
gamestart(); }, 2000);
} else {
gamestart();
}
}
for(var i=0;i<box.length;i++){
box[i].onclick = markSelection;
}
scoreboard.innerHTML=score;
}
gamestart();
I reviewed your game and made some changes to the code based on what stood out to me. There were a few bugs that were important to correct, and many things I changed purely for readability / preference.
I tend to avoid directly using timeouts. Promises are a good way to control the order of things in javascript. This game could likely benefit from OOP to make the logic more organized, but I didn't want to return you something that was completely unrecognizable. You are welcome to take this to code review for a more complete refactoring.
The first issue that I noticed is that your setInterval never resolves with the logic implemented. Because it never resolves, every time you attempted to show the bravo message, it would start an interval at 10 ms, and they would stack on top of eachother. This quickly would become an issue, potentially even breaking your page. Instead of attempting to redesign your interval logic, I decided to use the css transition attribute to handle the Bravo message, and I threw in a keyframe animation so you could see how to add other effects without javascript. Instead of having to write logic in js and preform resource expensive operations, I can leave the animation to css. Now js just needs to add and remove the hidden class.
I also wrote a helper function wait at the top of the js, and made functions with waiting async so I could use the await keyword instead of nesting my code inside timeouts. This is more readable in my own opinion.
To add a score, I moved the score variable above the gameStart function. This way each time the game restarts, the score is not affected. Then I just had to increment the score variable whenever a correct answer is given, and change the text in the dom.
One bug I noticed was that the correct answer could have been clicked several times, and the points would have increased, because the event listener was still active after the answer was submitted. To handle this, I changed the way the event listener was applied. Instead of using element.onclick =, I opted for el.addEventListener("click", . This allowed me to use .removeEventListener once the answer was given, and only reapply the event listener once the next round started. I also added a wait for incorrect answers, and some text when the wrong answer was given.
Other more cosmetic changes include using a helper function $ to make grabbing elements easier, and changing .innerHTML to .innerText to more clearly show intent / prevent potential bugs.
I didn't correct it in this code, but it's worth mentioning variable names in javascript are usually camel case. i.e. instead of getrandomcolor it would be getRandomColor
If you have any questions about my code, please ask 👍
const wait = t => new Promise(r => setTimeout(r, t));
const $ = (str, dom = document) => [...dom.querySelectorAll(str)];
function getrandomcolor(){
const random255 = () => Math.floor(Math.random() * 256);
const [r, g, b] = Array.from({length: 3}, random255);
return "rgb(" + r + ", " + g + ", " + b + ")";
}
let scoreboard = $('#score')[0];
let score = 0;
function gamestart(){
var mainh1 = $('#main-h1')[0];
mainh1.innerText = "Guess the color!";
rgbvaluetrue = getrandomcolor();
var rgb = $('#colorguess')[0];
rgb.innerText = rgbvaluetrue;
var body = document.body;
var allBoxes = $('.box');
async function displaybravo(element){
element.classList.remove("hidden");
await wait(2000);
element.classList.add("hidden");
await wait(1000);
}
for (var i=0; i<allBoxes.length; i++) {
allBoxes[i].style.backgroundColor = getrandomcolor();
}
var randomBoxIndex = Math.floor(Math.random() * allBoxes.length);
allBoxes[randomBoxIndex].style.backgroundColor = rgbvaluetrue;
async function markSelection() {
allBoxes.forEach(box => box.removeEventListener("click", markSelection));
if (this.style.backgroundColor == rgbvaluetrue) {
score++;
scoreboard.innerText = score;
mainh1.innerText = "BRAVO";
var brv = $('#bravo')[0];
await displaybravo(brv);
gamestart();
} else {
mainh1.innerText = "NOPE!";
await wait(1000);
gamestart();
}
}
allBoxes.forEach(box => box.addEventListener("click", markSelection));
scoreboard.innerHTML = score;
}
gamestart();
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: arial;
background-color: #1c1874;
color: rgb(105, 105, 139);
color: #fff;
}
.text-centered{
text-align: center;
text-shadow: 0px 2px 2px rgba(150, 150, 150, 1);
}
.box-container{
padding: 200px;
align-self: center;
display: flex;
flex-direction: row;
justify-content:space-evenly;
}
.box{
width: 200px;
height: 200px;
border-radius: 20px;
cursor: pointer;
border:5px solid #ffffff;
}
#score{
font-weight: 500;
font-size: 2em;
position: fixed;
top: 5%;
left: 5%;
}
#score::before {
content: "Score: ";
}
#bravo {
overflow: hidden;
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%; /*needed to transition to / from*/
transition: height 2s;
}
#bravo.hidden {
height: 0;
}
#bravo-text {
font-size: 5rem;
font-weight: bold;
color: black;
animation: glow 1s ease-in-out infinite alternate;
}
#keyframes glow {
from {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #e60073,
0 0 20px #e60073,
0 0 25px #e60073,
0 0 30px #e60073,
0 0 35px #e60073;
}
to {
text-shadow:
0 0 10px #fff,
0 0 20px #ff4da6,
0 0 30px #ff4da6,
0 0 40px #ff4da6,
0 0 50px #ff4da6,
0 0 60px #ff4da6,
0 0 70px #ff4da6;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
<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>Document</title>
<script defer src="main.js"></script>
</head>
<body>
<h1 class="text-centered" id="main-h1">Guess The Color!</h1>
<h2 class="text-centered" id="colorguess"></h2>
<p id="score">
</p>
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="bravo" class="hidden flexCenter">
<p id="bravo-text" class="flexCenter">
BRAVO
</p>
</div>
</body>
</html>
I am very new to coding. I found a inspiration and started making my website. I made a logo and 2 buttons, Shots and Designers. When I click on the first and the second button, they both change their color to white, but thats not what I want. I want that when I click on the second button, the first button change this color to start color (grey).I mean if button 2 clicked, change button 1 color to grey.
Here is my code:
<head>
<title>Richis corner</title>
</head>
<head>
<style>
.rectangle {
height: 85px;
width: 4500px;
background-color: #242526;
margin-top: -43px;
margin-left: -8px;
}
.image {
margin-top: -147px;
margin-left: -50px;
}
.button1 {
font-family: Helvetica;
background: none;
color: grey;
border: none;
font-size: 18px;
outline: none;
}
</style>
</head>
<body>
<div class="rectangle"></div>
<img src=https://i.yapx.ru/Koe4kb.png" class="image">
<button style="margin:-37px -25px;position: absolute;" class="button1" id="demo" onclick="myButton()">
Shots</button>
<button style="margin:-37px 50px;position: absolute;" class="button1" id="demo2"
onclick="mysecondButton()"> Designers</button>
<script>
function myButton() {
document.getElementById("demo").style.color = "white";
}
function mysecondButton() {
document.getElementById("demo2").style.color = "white";
}
</script>
</body>```
Here is your change
<script>
function myButton() {
document.getElementById("demo").style.color = "white";
}
function mysecondButton() {
document.getElementById("demo").style.color = "grey";
}
</script>
function myButton() {
document.getElementById("demo").style.color = "white";
}
function mysecondButton() {
document.getElementById("demo").style.color = "grey";
}
I'm not really used to es5, so i'm having a bit of trouble since i'm forced to use es5 in my case. the problem is when I do, updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})
to create a new panel on the scoreboard, my isPlayerInScoreboard function is returning false because playerName2 is somehow a global variable and not bound to the function PlayerPanel, you can see what I mean by invoking updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})
and then logging out "playerName2", which I don't think should be a global variable but somehow is
edit: also when I do this
updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})
updateScoreboard({"name":"bar","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})
in my panels array, all the object's getPlayerName method returns the last inputted name, so in this case if I did panels[0].getPlayerName() it'd return "bar" which is should return "foo"
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: rgba(25, 25, 25, 0.50);
font-family: "Arial";
}
.tab {
margin: 1px auto;
width: 95%;
height: 30px;
background-color: white;
}
#title-header {
/*display:inline-block;*/
/*color: white;*/
font-size: 25px;
color: white;
/*border-top: 1px solid white;*/
/*border-bottom: 1px solid white;*/
margin:0 auto;
/*vertical-align: middle;*/
text-align:center;
/*white-space: nowrap;*/
}
.player-img {
display: inline-block;
/*width: 50px;*/
}
.player-name {
display: inline-block;
position: relative;
bottom: 10px;
color: white;
}
</style>
</head>
<body>
<div id="title-header">
<h1>SleekRP</h1>
</div>
<div class="main-scoreboard">
<div class="tab">
<div class="player-img">
<img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb.jpg">
</div>
<p class="player-name">test</p>
</div>
<!-- <div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div> -->
</div>
<script>
var panels = [];
function setTitle(title){
document.getElementById("title-header").innerText = title
}
function isPlayerInScoreboard(name){
for (var i=0; i<panels.length; i++){
if (panels[i].getPlayerName() == name) {
return true
}
}
return false
}
function updateScoreboard(plyInfo){
if (!isPlayerInScoreboard(plyInfo.name)) {
PlayerPanel(plyInfo)
}
}
function PlayerPanel(plyInfo){
// Create element
var mainPanel = document.createElement('div')
mainPanel.className = "tab"
mainPanel.style.backgroundColor = "rgba(" + plyInfo.bgColor.r + ", " + plyInfo.bgColor.g + ", " + plyInfo.bgColor.b + ", 0.50)"
document.getElementsByClassName("main-scoreboard")[0].appendChild(mainPanel)
this.playerName2 = document.createElement('p')
this.playerName2.innerText = plyInfo.name
this.playerName2.className = "player-name"
mainPanel.appendChild(this.playerName2)
this.setPlayerName = function(name) {
this.playerName2.innerText = name
}
this.updatebGColor = function(bgColor){
mainPanel.style.backgroundColor = "rgba(" + bgColor.r + ", " + bgColor.g + ", " + bgColor.b + ", 0.50)"
}
this.getPlayerName = function() {
return this.playerName2.innerText
}
panels.push(this)
}
</script>
</body>
</html>
You should call your PlayerPanel with "new" when you are using "this" in it.
function updateScoreboard(plyInfo){
if (!isPlayerInScoreboard(plyInfo.name)) {
new PlayerPanel(plyInfo)
}
}
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.