第二次单击时,使onclick事件的反应不同

时间:2016-01-01 19:21:00

标签: javascript jquery

我的网站上有一个按钮,当您点击它时播放音乐,同时它会更改按钮内的文本(转到“转到SoundCloud”。) 当我点击它时,我希望该按钮(上面有新文本)重定向到SoundCloud。

现在,我在第一次点击时获得了两个,这是重定向到SoundCloud并播放曲目。 (加上它会改变文字)

任何想法,如何解决这个问题? THX!

var links = document.getElementById("playButton");
links.onclick = function() {

var html='<iframe width="100%" height="450" src="sourceOfMyMusic"></iframe>';
document.getElementById("soundCloud").innerHTML = html;

var newTexts = ["Go to SoundCloud"];
document.getElementById("playButton").innerHTML = newTexts;

newTexts.onclick = window.open('http://soundcloud.com/example');

};

5 个答案:

答案 0 :(得分:2)

使用一个变量来指示它是第一次还是第二次点击。

var first_click = true;
links.onclick = function() {
    if (first_click) {
        // do stuff for first click
        first_click = false;
    } else {
        // do stuff for second click
    }
}

答案 1 :(得分:0)

在第一次函数调用后重新定义onclick。

将onclick放在按钮而不是html上。

的document.getElementById(&#34;为playButton&#34)。的onclick = window.open(&#39; http://soundcloud.com/example&#39);

答案 2 :(得分:0)

在现代的前端中使用变量很难重新显示页面。这是另一个版本。

<div id='btnChangeMenu' class='menuBox swapButton' data-title='Click here in order to view the menu bar'> Menu </div>

function btnChangeMenuOnClick() {
    $("#btnChangeMenu").text($("#btnChangeMenu").text() == "Search" ? "Menu" : "Search");
    if ($(this).attr("data-click-state") == 1) {
        $(this).attr("data-click-state", 0);
        $(".menuSecondary").fadeOut("slow", function () {
            // will be called when the element finishes fading out
            // if selector matches multiple elements it will be called once for each

        });
    } else {
        $(this).attr("data-click-state", 1);
        $(".menuLeft, .menuRight").fadeOut("slow", function () {
            * code here *
        });
    }
};

答案 3 :(得分:0)

在某些情况下,另一种选择是使用三元运算符和布尔切换表达式:

let btn = document.querySelector('.button');

let isToggledOn = false;
btn.addEventListener ('click', function(e) {
    e.target.textContent = !isToggledOn ? 'Is ON' : 'Is OFF';
    isToggledOn = !isToggledOn;
});

答案 4 :(得分:0)

newTexts.onclick并没有创建打开窗口的功能,它只是采用window.open的返回值,该值将立即执行。

它应该看起来像: newTexts.onclick =()=> window.open('http://soundcloud.com/example');

这也不符合预期,因为newTexts不是实际的DOM元素,您需要在元素上附加新的onclick而不是数组...

但是对于此页面上的其他答案,逻辑很难阅读,因此我建议将逻辑重构为更易读。