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

我的网站上有一个按钮，当你点击它时，它会播放音乐，同时它会改变按钮内的文本（转到SoundCloud） 我希望当我点击这个按钮时，它（上面有新的文本）重定向到SoundCloud

现在我在第一次点击时得到了这两个，这是重定向到SoundCloud并播放曲目。（加上它改变了文本）

有什么想法，如何解决这个问题？谢谢

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');

};

var links=document.getElementById（“playButton”）；
links.onclick=function（）{
var html=''；
document.getElementById（“soundCloud”）.innerHTML=html；
var newTexts=[“转到SoundCloud”]；
document.getElementById（“playButton”）.innerHTML=newText；
newTexts.onclick=window.open（'http://soundcloud.com/example');
};

使用一个变量来指示是第一次单击还是第二次单击

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

---

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

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

---

document.getElementById（“playButton”）.onclick=window.open（“”）

在页面重新出现的现代前端使用变量是很困难的。这里有一个不同的版本

<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 *
        });
    }
};

菜单
函数btnChangeMenuOnClick（）{
$（“#btnChangeMenu”）.text（$（“#btnChangeMenu”）.text（）=“搜索”？“菜单”：“搜索”）；
if（$（this）.attr（“数据点击状态”）==1）{
$（this）.attr（“数据点击状态”，0）；
$（“.menuSecondary”）.fadeOut（“慢”，函数（）{
//将在元素淡出后调用
//如果选择器匹配多个元素，则将为每个元素调用一次
});
}否则{
$（this）.attr（“数据点击状态”，1）；
$（.menuLeft.menuRight”）.fadeOut（“慢”，函数（）{
*代码在这里*
});
}
};

在某些情况下，另一个选项是使用三元运算符和布尔切换表达式：

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

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

---

newTexts.onclick并不是创建一个打开窗口的函数，它只是获取立即执行的window.open的返回值

它应该是这样的： newtext.onclick=（）=>window.open（“”）

此外，这也不会像预期的那样工作，因为newtext不是实际的DOM元素，您需要在元素而不是数组上附加新的onclick

---

但是对于本页中的其他答案，逻辑很难阅读，因此我建议重构逻辑以提高可读性。

第二次单击时会发生什么？

newtext

是一个数组，它没有onclick属性。