在使用vanilla Js的事件处理程序中更改innerWidth时正确响应

Question

我希望在视口小于1024px时更改元素的innerHTML。

我应该没有任何jQuery，只能使用vanilla Js。

到目前为止，我尝试了这些解决方案：

(function changeTextualName() {

if (window.innerWidth <= 1024) {
    document.querySelector(".logo-text a").innerHTML = "example1 <br> example2";
} else {
    document.querySelector(".logo-text a").innerHTML = "example1 | Example2";
}

}());

这个第一个解决方案只是部分工作：第一次加载网页时它确实有效，但没有调整大小（由于缺少事件监听器而在意义的哲学意义上的“事件”，不会清除）。

我也试过这个解决方案，但根本不起作用：

(function changeTextualName() {

window.addEventListener("innerWidth <= 1024", function() {
        document.querySelector(".logo-text a").innerHTML = "example1 <br> Example2";
}

}());

作为新手，我会怀念逻辑。我一直在阅读监听resize事件，并没有看到任何代码示例处理1024或其他任何值。也许jQuery（或从头开始创建一个库 - 在这种情况下我无意做的事情）毕竟是必须的？

萨尔更新： enter image description here

Answer 1

只需在'resize'

的事件监听器中调用您的方法即可

function changeTextualName() {

if (window.innerWidth <= 1024) {
    document.querySelector(".logo-text a").innerHTML = "example1 <br> example2";
} else {
    document.querySelector(".logo-text a").innerHTML = "example1 | Example2";
}
window.addEventListener('resize',changeTextualName);