原生JS实现一个按钮的点击事件根据不同条件响应不同函数

例如,一个按钮实现暂停与继续。(下面错误代码只是为了表达意思- 。-)

<input id="btn" type="button" value="开始">
<script>
window.onload=function(){
    document.getElementById('btn').onclick=function(){
        if(this.value="开始"){
            this.value="暂停";
        }esle{
            this.value="开始";
        }
    }
</script>

怎么实现当value值为“开始”时点击按钮将value值设为“暂停”,当value值为“暂停”时,点击按钮时将值设置为“开始”。即一个按钮根据条件执行不同功能。

5个回答

设置一个自定义属性onOff,或者设置个类似的变量就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script type="text/javascript">
        window.onload = function () {
            var oInp = document.getElementsByTagName('input')[0];
            oInp.onOff = false;

            oInp.onclick = function () {
                if (this.onOff) {
                    this.value = '开始';
                    this.onOff = false
                    //  doSomething……
                }else {
                    this.value = '暂停';
                    this.onOff = true;
                    //  doSomeOtherthing……
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="开始">
</body>
</html>
Accenzer
Accenzer 写错了..使用自定义属性
3 年多之前 回复
Accenzer
Accenzer 非常感谢~ 茅塞顿开。使用一个外部变量解决问题,学到了。
3 年多之前 回复
  • - 被你搞糊涂了,,判断不是==这样么!!!你用一个=不成赋值了么 !!!!
 <input id="btn" type="button" value="开始">
<script>
window.onload=function(){
    document.getElementById('btn').onclick=function(){
        if(this.value=="开始"){
            this.value="暂停";
        }esle{
            this.value="开始";
        }
    }
</script>
  • - 被你搞糊涂了,,判断不是==这样么!!!你用一个=不成赋值了么 !!!!
 <input id="btn" type="button" value="开始">
<script>
window.onload=function(){
    document.getElementById('btn').onclick=function(){
        if(this.value=="开始"){
            this.value="暂停";
        }esle{
            this.value="开始";
        }
    }
</script>
zzhao114
Z. ZHANG 回复Accenzer: 然后就可以运行正确了
3 年多之前 回复
Accenzer
Accenzer 是哦。。。是我写错了,多谢指正。
3 年多之前 回复

用c:if试试....

Accenzer
Accenzer 谢谢回答,不过我没能理解(尴尬),之前写的代码有点乱,我重新编辑了一下,还请详细赐教..
3 年多之前 回复

第一个回答可以,可能楼主经验不足所有看不懂

weixin_43941237
weixin_43941237 您这回答可真好 有一点意义嘛?
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问