CODEWITHSUNDEEP
javascripthtmlcss
kisar18
kisar18

Reputation: 3

Background color of html body effects background color of button

i have a small html app that only changes background color of html body to randomly generated hexadecimal color. Problem i have is that when i click on the button new background color appears not only on body but it also effects background color of the button. In my css i defined that background color of the button should always be the same.

Do you know how to keep the background color of the button always same and independent of the body?

Bad background color inside of the button

Here is my code:

var button = document.getElementById('btn')

function createColorSegment(value) {
    const Segment = {}
    Segment.value = value
    return Segment
}

button.onclick = function() {
    const r1 = createColorSegment(undefined)
    const r2 = createColorSegment(undefined)
    const g1 = createColorSegment(undefined)
    const g2 = createColorSegment(undefined)
    const b1 = createColorSegment(undefined)
    const b2 = createColorSegment(undefined)

    function HexadecimalColor(colorSegment) {
        var numberOfColorSegment = Math.floor(Math.random() * 16)

        if (numberOfColorSegment == 10) {
            colorSegment.value = 'a'
        }
        else if (numberOfColorSegment == 11) {
            colorSegment.value = 'b'
        }
        else if (numberOfColorSegment == 12) {
            colorSegment.value = 'c'
        }
        else if (numberOfColorSegment == 13) {
            colorSegment.value = 'd'
        }
        else if (numberOfColorSegment == 14) {
            colorSegment.value = 'e'
        }
        else if (numberOfColorSegment == 15) {
            colorSegment.value = 'f'
        }
        else {
            colorSegment.value = numberOfColorSegment
        }
    }

    HexadecimalColor(r1)
    HexadecimalColor(r2)
    HexadecimalColor(g1)
    HexadecimalColor(g2)
    HexadecimalColor(b1)
    HexadecimalColor(b2)
    
    console.log(r1.value)
    console.log(r2.value)
    console.log(g1.value)
    console.log(g2.value)
    console.log(b1.value)
    console.log(b2.value)
    
    
    var HexColor = "#" + r1.value + r2.value + g1.value + g2.value + b1.value + b2.value
    console.log(HexColor) 
    
    document.getElementsByTagName('body')[0].style.backgroundColor = HexColor
    document.getElementsByClassName('hex-color-name')[0].innerText = "HEX COLOR: " + HexColor
}
* {
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
}

.container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.hex-color-name {
    font-family: 'Trebuchet MS';
    font-weight: bold;
    font-size: 36px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.button {
    position: absolute;
    right: 50%;
    transform: translateX(+50%);
    height: 40px;
    width: 100px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    background-color:rgba(0, 0, 0, 0.6);
    color: white;
    border: 2px solid rgba(128, 128, 128, 0.8);
}

.button:hover {
    color: white;
    background-color:rgba(0, 0, 0, 0.7);
}

.button:focus {
    outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script defer src="script.js"></script>
    <title>Project2</title>
</head>
<body>
    <div class="container">
        <div class="hex-color-name">HEX COLOR:</div>
        <button type="button" id="btn" class="button">Click me!</button>
    </div>
</body>
</html>

Upvotes: 0

Views: 89

Answers (1)

epascarello
epascarello

Reputation: 207501

You use opacity on your button.

background-color:rgba(0, 0, 0, 0.6); <-- .6 for the alpha
border: 2px solid rgba(128, 128, 128, 0.8); <-- .8 for the alpha
background-color:rgba(0, 0, 0, 0.7); <-- .7 for the alpha

So the color of the background effects the color of the button since it is not opaque. If you do not want that to happen do not use opacity.

.bg1 {
  background-color: rgba(0, 0, 0, 0.6);
}

.bg2 {
  background-color: rgb(100, 100, 100);
}
<button class="bg1">Test</button>
<button class="bg2">Test</button>

<div style="background-color: lime;">
  <button class="bg1">Test</button>
  <button class="bg2">Test</button>
</div>

Upvotes: 1

Related Questions