【问题标题】:When second Click on Button do something当第二次点击按钮做某事
【发布时间】:2012-10-24 15:29:24
【问题描述】:

我需要在单击按钮时显示“不显示”消息。当点击两次返回原始消息“显示”。第一件事我已经做了,我只需要第二件事的帮助,那就是第二次点击。

JavaScript:

function show()
{
    document.myform.button.value ="Dont show";//Changes message on button when clicked.
    document.myform.button.innerHTML= "Dont show";
}

HTML:

<form>
<input type=button value= "Show" name="button" id= "idButton"
onClick="show()">
</form>

【问题讨论】:

  • 当您输入问题时,右侧有一个方便的框,标题为如何格式化。值得一读,问题文本区域上方的 [?] 按钮提供的信息也是如此。这次我已经为你修正了代码格式。

标签: javascript events button click dom-events


【解决方案1】:

我建议:

function toggle(el, message1, message2) {
    if (!el || !message1 || !message2) {
        return false;
    }
    var text = el.tagName.toLowerCase() == 'input' ? el.value : (el.textContent || el.innerText),
        newText = text == message1 ? message2 : message1;

    if (el.tagName.toLowerCase() == 'input') {
        el.value = newText;
    }
    else {
        el.firstChild.nodeValue = newText;
    }
}

document.getElementById('idButton').onclick = function(){
    toggle(this, 'Show', "Don't show");
};

JS Fiddle demo.

对上述内容稍作修改:

function isTag(el, tagname) {
    if (!el || !tagname) {
        return false;
    }
    else {
        return el.tagName.toLowerCase() == tagname.toLowerCase() ? true : false;
    }
}

function toggle(el, message1, message2) {
    if (!el || !message1 || !message2) {
        return false;
    }
    else {
        var isInput = isTag(el, 'input'),
            text = isInput ? el.value : el.textContent || el.innerText,
            newText = text == message1 ? message2 : message1;
        if (isInput) {
            el.value = newText;
        }
        else if (el.textContent) {
            el.textContent = newText;
        }
        else {
            el.innerText = newText;
        }
    }
}

document.getElementById('idButton').onclick = function(){
    toggle(this, 'Show', "Don't show");
};

JS Fiddle demo.

【讨论】:

  • 另外,显示/隐藏可能是比显示/不显示更好的术语。
  • 同意,但我将其留给 OP 根据他的设计进行定制。功能就在那里让他这样做... =)
  • 谢谢,但它仍然不适合我。我原封不动地复制了你的功能。但他们没有工作。它们对你有用吗?
  • 他们当然对我有用,如果他们不这样做,那么我就不会发布它们作为答案。我链接到的演示(在答案中,代码块下方)对您有用吗?
  • 当我在演示中尝试时,它们对我有用。但是当我将代码复制到 Dreamweaver 并执行它时,它没有。
【解决方案2】:

您的函数 show 需要检查当前按钮值并将其设置为适当的新值。

我认为 show 函数主体周围缺少的大括号是一个错字。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-03-26
    • 2015-09-05
    • 1970-01-01
    • 2019-07-13
    • 1970-01-01
    • 2017-07-03
    • 1970-01-01
    相关资源
    最近更新 更多