как мне изменить значение location.href программно, используя vanilla javascript?

Question

У меня есть такая кнопка:

<button type="button" class="play-now-button" onclick="location.href='www.yahoo.com'">Play Now</button>

однако я хотел бы изменить значение location.href, используя vanilla js. То, что у меня ниже, не работает. Я посмотрел в Интернете и увидел несколько предложений, но безрезультатно. Что я делаю не так?

let playButton = document.getElementsByClassName("play-now-button")[0];
playButton.onclick.location.href = "www.google.com";

Я также пробовал:

playButton.onclick = function() {
   this.location.href = "www.google.com"
}

Но ничего из этого не работает. Мне нужно использовать кнопку. Я не хочу использовать тег <a>, потому что хочу сохранить стиль. Я также пытался вложить тег a в button, но безуспешно.

Что я делаю не так и как это исправить?

Answer 1

Здесь это не сработает, потому что этот код находится внутри iframe, используйте его в своем основном документе, он будет работать там.

let playButton = document.getElementsByClassName("play-now-button")[0];
playButton.onclick = function(e) {
   window.location.assign('https://www/google.com')
}

<button class="play-now-button">Open Another Link</button>

Answer 2

this будет HTMLButtonElement при выполнении обработчика.

Вам необходимо внести небольшие изменения в свой код.

playButton.onclick = function() { window.location.href = "www.google.com" }

Answer 3

window.location.href = "www.blabla.com";

// or

window.location.href = "/mysite/some-page";