Change text when screen width is less than amount not working

Question

I'm trying to change the text on this website when the screen size is less than 650, but it's not working. I've tried the answers from Do something if screen width is less than 960 px and Resizing images when screen is less than 1024 pixels width , which did not work. Here is the link to the replit, and the code snippet is also below.

if ($(window).width() < 650) { // I've also tried (window).width() and window.width
var words = $('.words');
words.text("Hello! This is the new text!");
}
else { 
}


<div class="intro">
  <div>
    <h1 class="ele">Hey there!</h1>
    <p class="ele words">Hi! This is the old text."</p>
  </div>
  <img class="ele me" src="me.png" alt="A picture of myself.">
</div>

Answer 1

I tried your code on CodePen and it seems to work fine, maybe your script is being loaded in the wrong place or the elements you're trying to change where not created yet, maybe some more code could help see the example

<div class="intro">
  <div>
    <h1 class="ele">Hey there!</h1>
    <p class="ele words">Hi! This is the old text."</p>
  </div>
  <img class="ele me" src="me.png" alt="A picture of myself.">
</div>

$(window).resize(function() {
  if ($(window).width() < 650) {
    var words = $('.words');
    words.text("Hello! This is the new text!");
    }
    else { 
      var words = $('.words');
    words.text("Hello! This is the old text.");
  }
})