Change font size + and - automatic

JavaScript
1 
function fontSizer(){
    if(!document.getElementById("font").style.fontSize){
        document.getElementById("font").style.fontSize= "15px";
    }
    if(document.getElementById("font").style.fontSize== "15px"){
        document.getElementById("font").style.fontSize= "10px";
    }else{
        document.getElementById("font").style.fontSize= "15px"
    }
    
}
 <p onload="fontSizer" id="font">Test</p>

This script is not working

2

Hi @Riyaz_saifi
Is there a question you have about this script?

3

its not working

4

The onoad attribute should be on the body tag and not on the p element and you also forgot the brackets.

<body onload="fontSizer()">
 <p  id="font">Test</p>

Not really sure your code is of any actual use anyway as 10px is practically invisible for most use cases and your logixc is weird. Also instead of using onload just put the function call at the end of the html where most scripts should reside.

<script>
function fontSizer(){
	alert('Oi');
    if(!document.getElementById("font").style.fontSize){
        document.getElementById("font").style.fontSize= "15px";
    }
    if(document.getElementById("font").style.fontSize== "15px"){
        document.getElementById("font").style.fontSize= "10px";
    }else{
        document.getElementById("font").style.fontSize= "15px"
    }
    
}
fontSizer()
</script>
</body>
</html>
5

HI there Riyaz_saifi,

it is bad practise to use “JavaScript” and “px”. :scream:

Use “CSS” and “em” instead. :ok:

coothead

6

well its doing unexpected behavior.
Any other way to do this

7 
var element = document.getElementById('font');
var style = window.getComputedStyle(element , null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
element .style.fontSize = (fontSize - 5) + 'px';

This should work better for getting the font size and cases where its not just an int but a float.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.