CODEWITHSUNDEEP
javascripthtml
dwinnbrown
dwinnbrown

Reputation: 3999

Run javascript function on load

I am trying to use this script to run a function on the page load. Can anyone see what's wrong? Stupid error, I'm sure - just can't work it out.

Code:

<script>

  var text = document.getElementById("myText");

  function changeFontSize(){
  if (window.innerWidth < 600) {
text.style.fontSize = "70px";
      } else {
      text.style.fontSize = "100px";
      }
  }

  window.onresize = changeFontSize;

  </script>

  <script>
  setTimeout(function() changeFontSize, 3000);
  </script>

Upvotes: 1

Views: 90

Answers (5)

jperelli
jperelli

Reputation: 7197

window.onload = changeFontSize;
window.onresize = changeFontSize;

alternatively, you can use

window.addEventListener("onload", changeFontSize, false);
window.addEventListener("onresize", changeFontSize, false);

Upvotes: 2

Keerthi
Keerthi

Reputation: 923

  var text = document.getElementById("myText");

  function changeFontSize(){
  if (window.innerWidth < 600) {
text.style.fontSize = "70px";
      } else {
      text.style.fontSize = "100px";
      }
  }

  window.onload = changeFontSize;
  window.onresize = changeFontSize;
<div id="myText">Test</div>

Upvotes: 0

shaithana
shaithana

Reputation: 2490

If you want absolutely use onresize instead onload (I suppose that you want to achieve something responsive), you need to wait the page is loaded, otherwise the object myText will not the object will not yet been initialized in the variable text ('cause it's not yet available in the DOM). Note that in this case the use of a setTimeout (you wrong the syntax anyway) is not necessary.

This works:

<script>

  function changeFontSize(){
      if (window.innerWidth < 600) {
          document.getElementById("myText").style.fontSize = "70px";
      } else {
          document.getElementById("myText").style.fontSize = "100px";
      }
  }

  window.onresize = changeFontSize;

</script>

Upvotes: 0

Pandacoder
Pandacoder

Reputation: 708

To start with, setTimeout() isn't used the way you wrote it, it should be setTimeout(changeFontSize, 3000); instead. That being said this would work:

<script>
    var text = document.getElementById("myText");

    function changeFontSize() {
        if (window.innerWidth < 600) {
            text.style.fontSize = "70px";
        } else {
            text.style.fontSize = "100px";
        }
    }

    window.onresize = changeFontSize;

    changeFontSize();
</script>

As was also said by jperelli, window.onload = changeFontSize would also work.

Upvotes: 0

Armfoot
Armfoot

Reputation: 4921

  var text = document.getElementById("myText");

  function changeFontSize() {
    if (window.innerWidth < 600) {
      text.style.fontSize = "70px";
    } else {
      text.style.fontSize = "100px";
    }
  }

  window.onresize = changeFontSize;

  setTimeout(changeFontSize, 3000);
<p id="myText">Test</p>

Basically you had a syntax error in:

setTimeout(function()  changeFontSize, 3000);

You don't need the function()

Upvotes: 0

Related Questions