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>
asked Jul 13, 2015 at 17:18
dwinnbrown
4,0499 gold badges42 silver badges61 bronze badges
-
Try to use window.onload = changeFontSize;JGV– JGV2015年07月13日 17:21:21 +00:00Commented Jul 13, 2015 at 17:21
5 Answers 5
window.onload = changeFontSize;
window.onresize = changeFontSize;
alternatively, you can use
window.addEventListener("onload", changeFontSize, false);
window.addEventListener("onresize", changeFontSize, false);
answered Jul 13, 2015 at 17:21
jperelli
7,2276 gold badges54 silver badges88 bronze badges
Sign up to request clarification or add additional context in comments.
5 Comments
dwinnbrown
tried that but it didn't work - i want the javascript to run once when the window is loaded and then with the listener for whenever it is resized.
dwinnbrown
ok it's working now :) but it is quite slow, there's a good one-two second wait until it runs it. Any ideas?
jperelli
yes, that is because onresize is demanding too much cpu power. See this stackoverflow.com/questions/8040092/…
dwinnbrown
really? I have an 8 core cpu so that shouldn't be a problem.
dwinnbrown
also, I am using this code: pastebin.com/GJi0KZyS but it isn't working on resize any more...
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()
answered Jul 13, 2015 at 17:23
Armfoot
4,9826 gold badges48 silver badges63 bronze badges
1 Comment
dwinnbrown
unfortunately this didn't work either...I would like to run the function once when the page is loaded and then whenever it is resized.
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.
answered Jul 13, 2015 at 17:24
Pandacoder
7087 silver badges11 bronze badges
2 Comments
dwinnbrown
thanks but it didn't work. the javascript should run once on the load of page/timeout and then whenever windows is resized.
Pandacoder
@dwinnbrown Are you putting the
<script> block in the <head> tags or at the end of the body (after the elements you want to re-size)? What's the behavior that you're seeing?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>
answered Jul 13, 2015 at 17:31
shaithana
2,4801 gold badge27 silver badges38 bronze badges
1 Comment
dwinnbrown
thanks but it didn't work. the javascript should run once on the load of page/timeout and then whenever windows is resized.
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>1 Comment
dwinnbrown
thanks but it didn't work. the javascript should run once on the load of page/timeout and then whenever windows is resized.
default