イベントハンドラのinnerWidthをバニラJsで変更するときの応答

Question

ビューポートが1024pxsより小さくなったときに要素の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"; 
} 

}()); 

この最初のソリューションは部分的にしか働いていた：それは、Webページがロードされた結婚初めての仕事でしたが、ありませんリサイズ上（の哲学的な意味での「イベント」イベントリスナーの不足による感覚はクリアされません）。

(function changeTextualName() { 

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

}()); 

私はロジックで何かを見逃して新人として：

は私もまったく動作しないこのソリューションを、試してみました。私はイベントのサイズを変更するのを聞いていましたが、1024などの値を扱うコード例は見られませんでした。たぶんjQuery（または、最初からライブラリを作成する - 私はこの場合に行うつもりはない）は結局のところ必要ですか？ザールため

更新： enter image description here

Answer 1

ちょうどあなたが小さなミスを持っている「サイズを変更」

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