Question

当满足特定条件时更改按钮背景颜色

2020-12-30

327

html

我希望仅当输入文本长度为 10 时，将鼠标悬停在按钮上时，按钮才更改其背景颜色。

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cafteria details</title>
    <link rel="stylesheet" href="styles.css">
   
        
</head>
<body>
    <h2>Cafeteria registration</h2>
    <form class="details">
       
        Organization:<div id="org"><input type="checkbox" id="cb1" >ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
                     <input type="checkbox" id="cb2" >Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
    
        
    </form>
    <button id="button" onmouseover="hovar()">Register</button>
    <script src="back_end.js" async></script>
</body>
</html>

css:

#button{
    font-size:20px;
    margin-left: 600px;
    border-radius: 8px;
   
    
}

#button:hover{
    background-color: lightsalmon;
    color: aquamarine;
}

javascript:

function hovar(){

    var phone=document.getElementById("ph_number").value;
    var btn=document.getElementById("button");

    if (phone.length!=10){
        btn.onmouseover.style.backgroundColor="lightsalmon"
    }
    else{
        btn.onmouseover.style.backgroundColor="chartreuse" 
        btn.onmouseover.style.color="black"
    }
}

但是我在 javascript 中不断收到此错误：

**Uncaught TypeError: Cannot set property 'backgroundColor' of undefined**

我在这里做错了什么？

Answer 1

您想要将“style”属性应用于事件（onmouseover）

function hovar()
  {
  var phone = document.getElementById("ph_number").value;
  var btn   = document.getElementById("button");

  if (phone.length!=10)
    {
    btn.style.backgroundColor="lightsalmon"  // remove onmouseover
    }
  else
    {
    btn.style.backgroundColor="chartreuse" 
    btn.style.color="black"
    }
  }

Answer 2

我认为这就是您正在寻找的（？）：

const phone = document.getElementById("ph_number")
  ,   btn   = document.getElementById("button")
  ;
phone.oninput = () =>
  {
  if (phone.value.length != 10)
    {
    btn.style.setProperty('--hoverBG', 'lightsalmon')
    btn.style.setProperty('--hoberColor', 'aquamarine')
    }
  else
    {
    btn.style.setProperty('--hoverBG', 'chartreuse')
    btn.style.setProperty('--hoberColor', 'black')
    }
  }

#button {
  --hoverBG     : lightsalmon;
  --hoberColor  : aquamarine;
  font-size     : 20px;
  margin-left   : 50px;
  border-radius : 8px;
  }
#button:hover{
  background-color : var(--hoverBG);
  color            : var(--hoberColor);
  }
input[type="checkbox"] + label + input {
  visibility: hidden;
  }
input[type="checkbox"]:checked + label + input {
  visibility: visible;
  }

<h2>Cafeteria registration</h2>
<form class="details">
  Organization:
  <div id="org">
    <input type="checkbox" id="cb1">
    <label for="cb1">ID no :  </label>
    <input type="number" id="org_number" >
    <br><br>
    <input type="checkbox" id="cb2">
    <label for="cb2">Mobile No: </label>
    <input type="tel" id="ph_number" placeholder="phone 10c">
  </div>
  <br><br>
</form>
<button id="button">Register</button>