通过JS点击按钮使value值循环改变

最新推荐文章于 2024-05-09 10:25:04 发布

原创最新推荐文章于 2024-05-09 10:25:04 发布 · 7.8k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #DOM #改变value值 #JS

JS 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个简单的签到签退按钮切换功能的实现方法，通过HTML和JavaScript代码，使得点击按钮可在签到和签退状态间切换。

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

比如我们现在要做一个公司的打卡系统，有一个“签到”按钮，点一下“签到”按钮就变成“签退”，再点一下又变成“签到”。

以下代码可以实现这个功能：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
        window.onload=function()//防止使用标签在定义之前
        {
        	var aaa=document.getElementById("box");//绑定事件
        	aaa.onclick=function()
        	{
        		var bbb=document.getElementById("box").value;
        		if(bbb==="签到")
        		{
        			document.getElementById("box").value="签退";
        		}
        		if(bbb==="签退")
        		{
        			document.getElementById("box").value="签到";
        		}	
        	}

        }        
        </script>
    </head>
    <body>
    <input type="submit" value="签到" id="box">
    </body>
</html>

如有不懂的可以在下方留言。