CODEWITHSUNDEEP
javascripthtml
Brus
Brus

Reputation: 21

Problem with a JavaScript animation applied to an HTML element

<html>
<body onload="load_script()">
<h3 id="description">Text</h3>

<script>
var size_start_h3 = 10.72;
var size_end_h3 = 18.72;

function start_h3() {
	if(size_start_h3 < size_end_h3) {
	   document.getElementById("description").style.fontSize = size_start_h3;
	   size_start_h3 += 2;
	   var timeout = setTimeout(function() {
	   start_h3();
	   }, 1200);
	}
}       

function load_script() {
   start_h3();
   // others functions;
}

</script>

</body>
</html>

I have a JavaScript code; it works if I'm offline; if I'm online, it doesn't work when I include it in a .js file and even if I insert it into the tag

I set two variables the size that the title h3 will take at the beginning and at the end. I have written a function based on which if the initial dimension is less than the final one, the text will gradually increase its size of 2 px at a time until it reaches the final size. The startup function will be started via another function when the page is loaded (along with other script functions)

Nevertheless, the console doesn't return me errors and if I write console.log(size_start_h3) at the end of the function its value changes up to 18.72; so, function work but the size of h3 doesn't change. Any help is welcome. Thanks.

Upvotes: 1

Views: 35

Answers (1)

Randy Casburn
Randy Casburn

Reputation: 14165

CSS measures require identification of the measure as part of the unit value. You need to append that to your string for the font size.

Here I added "px":

<html>
<body onload="load_script()">
<h3 id="description">Text</h3>

<script>
var size_start_h3 = 10.72;
var size_end_h3 = 18.72;

function start_h3() {
	if(size_start_h3 < size_end_h3) {
	   document.getElementById("description").style.fontSize = size_start_h3 + "px";
	   size_start_h3 += 2;
	   var timeout = setTimeout(function() {
	   start_h3();
	   }, 1200);
	}
}       

function load_script() {
   start_h3();
   // others functions;
}

</script>

</body>
</html>

Upvotes: 2

Related Questions