web_设置四个按键1,2,3,4 ；另外四个按键1，2，3，4；当按1，2，3，4时，对应数字变色

本文链接：https://blog.csdn.net/zhu_fangyuan/article/details/107799989

本文介绍了一个简单的HTML和JavaScript实现的按钮颜色交互功能。通过四个按钮分别改变对应大写字母按钮的背景颜色，展示了如何使用getElementById和onclick事件来操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    	/*
    	 * 创建方法f1()
    	 * 将id为a的按键赋给变量a1
    	 * 将id为A的按键赋给变量a2
    	 * 设置按键颜色
    	 * 
    	 * 设置a1的点击事件,即调用color1设置为a2的颜色
    	 *
    	 */
        function f1() {
            var a1 = document.getElementById("a");
            var a2 = document.getElementById("A");
            var color1 = "darkgoldenrod" ;
            
            a1.onclick = function () {
                a2.style.background = color1 ;
            }
        }
        
        /*
    	 * 创建方法f2()
    	 * 将id为b的按键赋给变量b1
    	 * 将id为B的按键赋给变量b2
    	 * 设置按键颜色
    	 * 
    	 * 设置b1的点击事件,即调用color2设置为b2的颜色
    	 *
    	 */
        
        function f2() {
            var b1 = document.getElementById("b");
            var b2 = document.getElementById("B");
            var color2 = "blueviolet" ;
            
            b1.onclick = function () {
                b2.style.background = color2 ;
            }

        }
        /*
         * 创建方法f3()
         */
        function f3() {
            var c1 = document.getElementById("c");
            var c2 = document.getElementById("C");
            var color3 = "cyan" ;
            c1.onclick = function () {
                c2.style.background = color3 ;
            }

        }
        function f4() {
            var d1 = document.getElementById("d");
            var d2 = document.getElementById("D");
            var color4 = "grey" ;
            d1.onclick = function () {
                d2.style.background = color4 ;
            }

        }
    </script>
</head>
<body>
	
<!--
	作者：zhu
	时间：2020-07-31
	描述：设置按键1、2、3、4并设置id为a、b、c、d，并调用f1()、f2()...方法
-->
	
<button id="a" onclick="f1()">1</button>
<button id="b" onclick="f2()">2</button>
<button id="c" onclick="f3()">3</button>
<button id="d" onclick="f4()">4</button>

<br>

<!--
	作者：zhu
	时间：2020-07-31
	描述：设置按键1、2、3、4并设置id为A、B、C、D
-->
<button id="D">4</button>
<button id="B">2</button>
<button id="A">1</button>
<button id="C">3</button>

</body>
</html>

界面展示效果