Question

我想更改我的javascript中按钮的颜色，但是使用forEach（）或循环来获取javascript中列出的按钮现在为蓝色。我不想使用HTML，因为我正在尝试练习使用事件。当鼠标悬停在颜色上时，我也希望颜色变为黑色，也可以使用javascript和“ mouseover”鼠标色。谢谢。 JS：

const number1 = document.getElementById('number1')
number1.style.color="blue"
const number2 = document.getElementById('number2')
number2.style.color="blue"
const number3 = document.getElementById('number3')
number3.style.color="blue"
const number4 = document.getElementById('number4')
number4.style.color="blue"
const number5 = document.getElementById('number5')
number5.style.color="blue"
const number6 = document.getElementById('number6')
number6.style.color="blue"
const number7 = document.getElementById('number7')
number7.style.color="blue"
const number8 = document.getElementById('number8')
number8.style.color="blue"
const number9 = document.getElementById('number9')
number9.style.color="blue"
const number0 = document.getElementById('number0')
number0.style.color="blue"
const decimal = document.getElementById('decimal')
decimal.style.color="blue"

HTML：

<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">

<title> Calculator 8 </title>
 <script src="fp.js" defer></script>
 <link rel="stylesheet" href="fp.css">



</head>

<body>
 <section class="calculator8">
    <h1> Calculator 8 </h1>
  <form>
   <input type="text" name="calcScreeng" id="numberBox" class="screen8">
  </form>
  <div class="buttons8"> 
   <!-- operation buttons -->
   <button id="multiply" type="button" class="btn8 btn-mul" data-num="*">*</button>
   <button id="divide" type="button" class="btn8 btn-div" data-num="/">/</button>
   <button id="subtract" type="button" class="btn8 btn-sub" data-num="-">-</button>
   <button id="add" type="button" class="btn8 btn-add" data-num="+">+</button>
   <!-- number buttons -->
   <button id="decimal" type="button" class="btn8 btn-grey" data-num=".">.</button>
   <button id="number9" type="button" class="btn8 btn-grey" data-num="9">9</button>
   <button id="number8" type="button" class="btn8 btn-grey" data-num="8">8</button>
   <button id="number7" type="button" class="btn8 btn-grey" data-num="7">7</button>
   <button id="number6" type="button" class="btn8 btn-grey" data-num="6">6</button>
   <button id="number5" type="button" class="btn8 btn-grey" data-num="5">5</button>
   <button id="number4" type="button" class="btn8 btn-grey" data-num="4">4</button>
   <button id="number3" type="button" class="btn8 btn-grey" data-num="3">3</button>
   <button id="number2" type="button" class="btn8 btn-grey" data-num="2">2</button>
   <button id="number1" type="button" class="btn8 btn-grey" data-num="1">1</button>
   <button id="number0" type="button" class="btn8 btn-grey" data-num="0">0</button>
   <button id="equals" type="button" class="btn8 btn-grey">=</button>
   <button id="clear" type="button" class="btn8 btn-grey">C</button>


  </div>



 </section>


</body>

</html>

Answer 1

基于此answer和此document，您可以这样编码：

var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {   
      //Event Listener for mouseenter
      console.log(buttons[i].id.lastIndexOf('number'))
      if( buttons[i].id.lastIndexOf('number')!=-1 || buttons[i].id.lastIndexOf('decimal')!=-1)
      {
      buttons[i].addEventListener("mouseenter", function( event ) {   
    // highlight the mouseenter target
    event.target.style.color = "blue";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);

  //Event Listener for mouseover
  // This handler will be executed every time the cursor
  // is moved over a different list item
  buttons[i].addEventListener("mouseover", function( event ) {   
    // highlight the mouseover target
    event.target.style.color = "orange";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
}
}

<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">

<title> Calculator 8 </title>
 <script src="fp.js" defer></script>
 <link rel="stylesheet" href="fp.css">



</head>

<body>
 <section class="calculator8">
    <h1> Calculator 8 </h1>
  <form>
   <input type="text" name="calcScreeng" id="numberBox" class="screen8">
  </form>
  <div class="buttons8"> 
   <!-- operation buttons -->
   <button id="multiply" type="button" class="btn8 btn-mul" data-num="*">*</button>
   <button id="divide" type="button" class="btn8 btn-div" data-num="/">/</button>
   <button id="subtract" type="button" class="btn8 btn-sub" data-num="-">-</button>
   <button id="add" type="button" class="btn8 btn-add" data-num="+">+</button>
   <!-- number buttons -->
   <button id="decimal" type="button" class="btn8 btn-grey" data-num=".">.</button>
   <button id="number9" type="button" class="btn8 btn-grey" data-num="9">9</button>
   <button id="number8" type="button" class="btn8 btn-grey" data-num="8">8</button>
   <button id="number7" type="button" class="btn8 btn-grey" data-num="7">7</button>
   <button id="number6" type="button" class="btn8 btn-grey" data-num="6">6</button>
   <button id="number5" type="button" class="btn8 btn-grey" data-num="5">5</button>
   <button id="number4" type="button" class="btn8 btn-grey" data-num="4">4</button>
   <button id="number3" type="button" class="btn8 btn-grey" data-num="3">3</button>
   <button id="number2" type="button" class="btn8 btn-grey" data-num="2">2</button>
   <button id="number1" type="button" class="btn8 btn-grey" data-num="1">1</button>
   <button id="number0" type="button" class="btn8 btn-grey" data-num="0">0</button>
   <button id="equals" type="button" class="btn8 btn-grey">=</button>
   <button id="clear" type="button" class="btn8 btn-grey">C</button>


  </div>



 </section>


</body>

Answer 2

要将事件监听器添加到诸如 mouse hover 或 click 之类的按钮，请使用 addEventListener 方法。传入事件名称以监听方法（例如 mouseenter 来检测鼠标的悬停），然后传入该事件发生时要调用的函数。

您可以在html页面中获取所有按钮并将其存储在数组变量中： var allButtons = document.getElementsByTagName("button");

或者，您可以通过为按钮分配类或名称属性来对其进行分组： <button class="multiColorButtons">9</button> 这样您就可以按他们的组访问它们： var theButtons = document.getElementsByClassName("multiColorButtons");

然后可以遍历它们并附加事件侦听器以更改颜色：

for (let i = 0; i < theButtons.length; i++) {
     theButtons[i].addEventListener("mouseenter", (event) => {
         event.target.style.display = "black";
     });
}

如何将按钮的颜色更改为一个命令？

2 个答案: