/    Sign up×
Community /Pin to ProfileBookmark

increasing font by 1 px

Copy linkTweet thisAlerts:
Apr 01.2014

Hello people,

I have some code. There is a button and text. When the button has been pressed, the text font should increase by 1 pixel every time the button has been pressed. This is de code i have. It should work on this way but i made a mistake at “style.fontsize = fontsize + 1;” but i don’t know what the correct code is. Anyone else know?? U should really help me! Thanks.

Reckimo..

(CODE)

<script>

window.onload = function letsgo (){
document.getElementById(“tekst”).style.fontsize = fontsize + 1;

}

</script>

</head>

<body>

<h1 id=”tekst”>”Dit is een stuk tekst.”</h1>

<input type=”button” id=”knop” value=”verander kleur” onclick=”letsgo ();”>

</body>
</html>

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyApr 01.2014 — Try something like this
[CODE]
document.getElementById("tekst").style.fontSize = parseInt(document.getElementById("tekst").style.fontSize) + 1;
[/CODE]
Copy linkTweet thisAlerts:
@reckimoauthorApr 01.2014 — Sup3rkirby thank you for your answer. It worked, but to understand the code, why parseint? Parseint transforms a number to string right? It has to be a number and not a string, am i correct?

Dont understand correctly this piece of code:

= parseInt(document.getElementById("tekst").style.fontSize) + 1;
Copy linkTweet thisAlerts:
@reckimoauthorApr 01.2014 — Edit: after trying your code the code you wrote doesn't work unfortunately.. Any idea?
Copy linkTweet thisAlerts:
@Sup3rkirbyApr 01.2014 — It's actually the reverse of what you are thinking. [B]parseInt()[/B] takes a non-integer and converts it into an integer. So in the case of the [I]font-size[/I] attribute it would take a value like "14px" and convert it to 14, allowing you to properly add a number to it (giving you 15 rather than string concatenation which would give you 141).

[EDIT]

And my apologies. Since this value is being applied to the font-size attribute it requires a unit. My code would simply return 15 where you would want the value to be "15px". Try this:
[CODE]
document.getElementById("tekst").style.fontSize = (parseInt(document.getElementById("tekst").style.fontSize) + 1) + "px";
[/CODE]
Copy linkTweet thisAlerts:
@reckimoauthorApr 01.2014 — Thank you for the answers. An integer means number? Translator doenst give a right answer on that translate.

About the code:

Unfortunately still not working. This is what i have:

[IMG]http://i62.tinypic.com/5ozbsm.png[/IMG]

(http://i62.tinypic.com/5ozbsm.png)
Copy linkTweet thisAlerts:
@Sup3rkirbyApr 01.2014 — At this point the problem isn't javascript. There is no [I]font-size[/I] set for your [B]<h1>[/B] by default. Typically you could set something like that in the CSS. There is no standard (or safe) way to get the [I]font-size[/I] of an element if it hasn't been set.

And to answer your question about integers. An integer is a whole number (no decimals). Hopefully that translates a little better.
Copy linkTweet thisAlerts:
@reckimoauthorApr 01.2014 — Oops! My faulty... excuse me.. also i am learning javascript every day ?.

Still the code is not working... i'm sorry i have to say it. (A)

Even if i put the <style> under the <script> its still not working. The button works fine, when i replace the function for a alert the button gives an alert when the button has been clicked.

My new code with <style>:

http://i62.tinypic.com/330a54i.png
Copy linkTweet thisAlerts:
@Sup3rkirbyApr 01.2014 — Well, it looks like you can get the font-size via javascript, however this method does not work in IE8 and lower.
[CODE]
 function vergroot() {
var $fontSize = document.getElementById("tekst").style.fontSize;
if($fontSize == "") {
var $style = window.getComputedStyle(document.getElementById('tekst'));
$fontSize = $style.getPropertyValue('font-size');
}
console.log($fontSize);
document.getElementById("tekst").style.fontSize = (parseInt($fontSize) + 1) + "px";
}
[/CODE]

This version will first check to see if there is a font-size on the element itself. If not, it checks the CSS and gets the font-size from there. Again this requires IE9+, Chrome, Safari, Firefox (or any other modern browser).
Copy linkTweet thisAlerts:
@TcobbApr 01.2014 — You can try this trick, which may not work for particular browsers/versions, like so:

[CODE]// assume the element you want to get the font size of has an id of "d1"

var id, sp;

id = document.getElementById('d1');
sp = document.createElement('span');
sp.style.display = 'inline-block';
sp.style.padding = '0px';
sp.style.width = '1em';
sp.style.height = '1em';
id.appendChild(sp);
console.log("pxWidth: " + sp.offsetWidth);
console.log("pxHeight: " + sp.offsetHeight);
id.removeChild(sp);
[/CODE]
Copy linkTweet thisAlerts:
@reckimoauthorApr 01.2014 — All the people thanks for help!! ?
×

Success!

Help @reckimo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...