Question

我的网站上有一个按钮，当您点击它时播放音乐，同时它会更改按钮内的文本（转到“转到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');

};

Answer 1

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

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

Answer 2

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

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

的document.getElementById（＆＃34;为playButton＆＃34）。的onclick = window.open（＆＃39; http://soundcloud.com/example＆＃39）;

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

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

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

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

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

5 个答案: