Button becomes unclickable on changing background color-CodePudding

Whenever i change the background color of a button in CSS, it becomes unclickable. Same happens if i remove button border in css

HTML

<div >
                    <button onclick="click('7')" >7</button>
                    <button onclick="click('8')" >8</button>
                    <button onclick="click('9')" >9</button>
                    <button onclick="click('/')" >/</button>
                </div>

CSS

.btn{
    width: 60px;
    height: 60px;
    margin-left: 30px;
    margin-top: 25px;
    background: beige;   
   }

CodePudding user response：

try background-color

and it is still clickable, I think you are missing the :hover s

.btn{
    width: 60px;
    height: 60px;
    margin-left: 30px;
    margin-top: 25px;
    background-color: beige;   
   }
.btn:hover {
  background-color:gray;
}

<div >
                    <button onclick="click('7')" >7</button>
                    <button onclick="click('8')" >8</button>
                    <button onclick="click('9')" >9</button>
                    <button onclick="click('/')" >/</button>
                </div>

CodePudding user response：

Certainly in Google Chrome using click as the function name was causing an issue - changing that to clicker, for instance, seems to alleviate that issue and it works as expected.

function clicker(val) {
  document.getElementById("screen").value  = val 
}

.btn {
  width: 60px;
  height: 60px;
  margin-left: 30px;
  margin-top: 25px;
  background: beige;
  cursor:pointer;
}
.btn:hover{
  background:rgba(0,100,0,0.25)
}

#screen{
  width:25rem;
  height:2rem;
  border:2px solid black;
  margin:2rem 0;
  background: beige;
}

<div >
  <button onclick="clicker('7')" >7</button>
  <button onclick="clicker('8')" >8</button>
  <button onclick="clicker('9')" >9</button>
  <button onclick="clicker('/')" >/</button>
</div>

<input type='text' id='screen' />

An alternative using a delegated event listener

document.querySelector('.row').addEventListener('click',e=>{
  document.querySelector('#screen').value =e.target.textContent
})

.btn {
  width: 60px;
  height: 60px;
  margin-left: 30px;
  margin-top: 25px;
  background: beige;
  cursor: pointer;
}

.btn:hover {
  background: rgba(0, 100, 0, 0.25)
}

#screen {
  width: 25rem;
  height: 2rem;
  border: 2px solid black;
  margin: 2rem 0;
  background: beige;
}

<div >
  <button >7</button>
  <button >8</button>
  <button >9</button>
  <button >/</button>
</div>
<input type='text' id='screen' />