I have a button on my website, which plays the music when you click on it and in the same time it changes the text inside of the button (to "Go to SoundCloud".) I want that button (with the new text on it) to redirect to SoundCloud when I click on it.

Now I got both when click first time, which is redirect to SoundCloud and play the track. (plus it changes the text)

Any ideas, how to solve this problem? 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('');

};

I have a button on my website, which plays the music when you click on it and in the same time it changes the text inside of the button (to "Go to SoundCloud".) I want that button (with the new text on it) to redirect to SoundCloud when I click on it.

Now I got both when click first time, which is redirect to SoundCloud and play the track. (plus it changes the text)

Any ideas, how to solve this problem? 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./example');

};

• javascript
• jquery

• What should happen when clicked second time? – Will Commented Jan 1, 2016 at 19:24
• newTexts is an array, it does not have onclick attribute. – shanmuga Commented Jan 1, 2016 at 19:26

4 Answers 4

Use a variable that indicates whether it's the first or second click.

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

Just redefine the onclick after the first function call.

Put the onclick on the button instead of the html.

document.getElementById("playButton").onclick=window.open('http://soundcloud./example');

Another option in some cases is to use a ternary operator and a boolean toggle expression:

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 is not creating a function to open a window, it is simply taking the return value of window.open which is being executed right away.

It should look like: newTexts.onclick = () => window.open('http://soundcloud./example');

Also this will not work as intended because newTexts is not the actual DOM element, you need to attach the new onclick on the element and not the array...

But to other answers in this page, the logic is hard to read, so I'd advise to refactor the logic to be more readable.