Can't Increase-Decrease font size
-1
I want to increase and decrease font size continuously. It just ain't happening. It increases but then stops and starts flickering like something is stopping it from decreasing.
Tell me whats wrong here.
var change = document.querySelector("p");
change.style.fontSize = "20px";
var t = 20;
setInterval(function(){
t++;
change.style.fontSize = t+"px";
if(t==50){
setInterval(function(){
t--;
change.style.fontSize = t+"px";
if(t==20){
clearInterval();
}
},50);
}
},50);<p>example text</p>javascript html
edited Nov 21 '18 at 12:47
DaFois
2,01941421
asked Nov 21 '18 at 12:38
Sarthak JhaSarthak Jha
1313
add a comment |
-1
I want to increase and decrease font size continuously. It just ain't happening. It increases but then stops and starts flickering like something is stopping it from decreasing.
Tell me whats wrong here.
var change = document.querySelector("p");
change.style.fontSize = "20px";
var t = 20;
setInterval(function(){
t++;
change.style.fontSize = t+"px";
if(t==50){
setInterval(function(){
t--;
change.style.fontSize = t+"px";
if(t==20){
clearInterval();
}
},50);
}
},50);<p>example text</p>javascript html
edited Nov 21 '18 at 12:47
DaFois
2,01941421
asked Nov 21 '18 at 12:38
Sarthak JhaSarthak Jha
1313
1
Your outer setInterval keeps running (+) even when your inner setInterval is running too (-). So in that scenario, you will always be doing +1 -1 over and over.
– Bram Vanroy
Nov 21 '18 at 12:40
so how can I stop it from doing that ? I can't figure it out.
– Sarthak Jha
Nov 21 '18 at 12:42
set the intervals into a variable and clear the outer interval when the inner one starts: developer.mozilla.org/en-US/docs/Web/API/…
– Pete
Nov 21 '18 at 12:48
add a comment |
-1
-1
-1
I want to increase and decrease font size continuously. It just ain't happening. It increases but then stops and starts flickering like something is stopping it from decreasing.
Tell me whats wrong here.
var change = document.querySelector("p");
change.style.fontSize = "20px";
var t = 20;
setInterval(function(){
t++;
change.style.fontSize = t+"px";
if(t==50){
setInterval(function(){
t--;
change.style.fontSize = t+"px";
if(t==20){
clearInterval();
}
},50);
}
},50);<p>example text</p>javascript html
edited Nov 21 '18 at 12:47
DaFois
2,01941421
asked Nov 21 '18 at 12:38
Sarthak JhaSarthak Jha
1313
I want to increase and decrease font size continuously. It just ain't happening. It increases but then stops and starts flickering like something is stopping it from decreasing.
Tell me whats wrong here.
var change = document.querySelector("p");
change.style.fontSize = "20px";
var t = 20;
setInterval(function(){
t++;
change.style.fontSize = t+"px";
if(t==50){
setInterval(function(){
t--;
change.style.fontSize = t+"px";
if(t==20){
clearInterval();
}
},50);
}
},50);<p>example text</p> var change = document.querySelector("p");
change.style.fontSize = "20px";
var t = 20;
setInterval(function(){
t++;
change.style.fontSize = t+"px";
if(t==50){
setInterval(function(){
t--;
change.style.fontSize = t+"px";
if(t==20){
clearInterval();
}
},50);
}
},50);<p>example text</p> var change = document.querySelector("p");
change.style.fontSize = "20px";
var t = 20;
setInterval(function(){
t++;
change.style.fontSize = t+"px";
if(t==50){
setInterval(function(){
t--;
change.style.fontSize = t+"px";
if(t==20){
clearInterval();
}
},50);
}
},50);<p>example text</p>javascript html
javascript html
edited Nov 21 '18 at 12:47
DaFois
2,01941421
asked Nov 21 '18 at 12:38
Sarthak JhaSarthak Jha
1313
edited Nov 21 '18 at 12:47
DaFois
2,01941421
asked Nov 21 '18 at 12:38
Sarthak JhaSarthak Jha
1313
edited Nov 21 '18 at 12:47
DaFois
2,01941421
edited Nov 21 '18 at 12:47
DaFois
2,01941421
edited Nov 21 '18 at 12:47
DaFois
2,01941421
2,01941421
asked Nov 21 '18 at 12:38
Sarthak JhaSarthak Jha
1313
asked Nov 21 '18 at 12:38
Sarthak JhaSarthak Jha
1313
asked Nov 21 '18 at 12:38
Sarthak JhaSarthak Jha
1313
1313
1
Your outer setInterval keeps running (+) even when your inner setInterval is running too (-). So in that scenario, you will always be doing +1 -1 over and over.
– Bram Vanroy
Nov 21 '18 at 12:40
so how can I stop it from doing that ? I can't figure it out.
– Sarthak Jha
Nov 21 '18 at 12:42
set the intervals into a variable and clear the outer interval when the inner one starts: developer.mozilla.org/en-US/docs/Web/API/…
– Pete
Nov 21 '18 at 12:48
add a comment |
1
Your outer setInterval keeps running (+) even when your inner setInterval is running too (-). So in that scenario, you will always be doing +1 -1 over and over.
– Bram Vanroy
Nov 21 '18 at 12:40
so how can I stop it from doing that ? I can't figure it out.
– Sarthak Jha
Nov 21 '18 at 12:42
set the intervals into a variable and clear the outer interval when the inner one starts: developer.mozilla.org/en-US/docs/Web/API/…
– Pete
Nov 21 '18 at 12:48
1
1
Your outer setInterval keeps running (+) even when your inner setInterval is running too (-). So in that scenario, you will always be doing +1 -1 over and over.
– Bram Vanroy
Nov 21 '18 at 12:40
Your outer setInterval keeps running (+) even when your inner setInterval is running too (-). So in that scenario, you will always be doing +1 -1 over and over.
– Bram Vanroy
Nov 21 '18 at 12:40
so how can I stop it from doing that ? I can't figure it out.
– Sarthak Jha
Nov 21 '18 at 12:42
so how can I stop it from doing that ? I can't figure it out.
– Sarthak Jha
Nov 21 '18 at 12:42
set the intervals into a variable and clear the outer interval when the inner one starts: developer.mozilla.org/en-US/docs/Web/API/…
– Pete
Nov 21 '18 at 12:48
set the intervals into a variable and clear the outer interval when the inner one starts: developer.mozilla.org/en-US/docs/Web/API/…
– Pete
Nov 21 '18 at 12:48
add a comment |
2 Answers
2
active
oldest
votes
1
function toggleFontSize(selector, init, increase = true) {
selector.style.fontSize = `${init}px`;
const handle = setInterval(function() {
init = increase ? init + 1 : init - 1;
selector.style.fontSize = `${init}px`;
if (init == 50 && increase) {
clearInterval(handle);
toggleFontSize(selector, init, false);
} else if (init == 20 && !increase) {
clearInterval(handle);
toggleFontSize(selector, init, true);
}
}, 50);
}
toggleFontSize(document.querySelector("p"), 20);<p>Hello world.</p>However, it might be better to just use CSS animations which is definitely smoother.
p {
font-size: 20px;
animation: toggleFontSize 1.5s linear infinite alternate;
}
@keyframes toggleFontSize {
from {
font-size: 20px;
}
to {
font-size: 50px;
}
}<p>Hello world.</p>answered Nov 21 '18 at 12:50
Bram VanroyBram Vanroy
13.1k1363137
ye. css animations are the better solution. apart from that, the scripted idea is not using requestAnimationFrame, thus could benefit from even further improvement
– GottZ
Nov 21 '18 at 12:55
@GottZ Please stop changing myinitassignment. I don't like your syntax (to each their own) and there is no benefit of using one over the other.
– Bram Vanroy
Nov 21 '18 at 13:01
while i did stop adding this back in before you wrote that comment (yes, reading the edit history helps to figure out the authors intent) i'd disagree due to one fact: if you can avoid typing out variable names over and over, it usually results in less error prone code as a result. for example: if you would copy that line somewhere else to do exactly the same but with a different variable name thaninit, you might run into the typical oversight issue of changing the other two references to that variable. sorry. i'm just avoiding such possibilities in my daily programming tasks.
– GottZ
Nov 21 '18 at 13:19
You don't need to apologise. If that is the way that you write code, that is fine - but I don't. My argument to not write it as you suggest, is because the operator+=assumes you are always adding to the variable and that its value will keep increasing. You have to read the whole line before you realise that it might actually decrease because depending on the condition, you'll getinit += -1. For me, readability is important - I want to be able to just skim through quickly and get the gist. As I said, to each their own style of coding.
– Bram Vanroy
Nov 21 '18 at 13:28
add a comment |
0
You can better split the increase and decrease up in parts:
See attached JSFiddle
https://jsfiddle.net/5tzafspo/5/
var change = document.querySelector("p");
change.style.fontSize = "20px";
var currentSize = 20;
var minSize = 20;
var maxSize = 50;
var intervalTime = 50;
increaseSize();
function increaseSize(){
var interval = setInterval(function(){
currentSize++;
change.style.fontSize = currentSize+"px";
if(currentSize === maxSize){
clearInterval(interval);
decreaseSize();
}
}, intervalTime);
}
function decreaseSize(){
var interval = setInterval(function(){
currentSize--;
change.style.fontSize = currentSize+"px";
if(currentSize === minSize){
clearInterval(interval);
increaseSize();
}
}, intervalTime);
}
answered Nov 21 '18 at 12:51
Wouter CoeberghWouter Coebergh
391315
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412212%2fcant-increase-decrease-font-size%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
function toggleFontSize(selector, init, increase = true) {
selector.style.fontSize = `${init}px`;
const handle = setInterval(function() {
init = increase ? init + 1 : init - 1;
selector.style.fontSize = `${init}px`;
if (init == 50 && increase) {
clearInterval(handle);
toggleFontSize(selector, init, false);
} else if (init == 20 && !increase) {
clearInterval(handle);
toggleFontSize(selector, init, true);
}
}, 50);
}
toggleFontSize(document.querySelector("p"), 20);<p>Hello world.</p>However, it might be better to just use CSS animations which is definitely smoother.
p {
font-size: 20px;
animation: toggleFontSize 1.5s linear infinite alternate;
}
@keyframes toggleFontSize {
from {
font-size: 20px;
}
to {
font-size: 50px;
}
}<p>Hello world.</p>answered Nov 21 '18 at 12:50
Bram VanroyBram Vanroy
13.1k1363137
ye. css animations are the better solution. apart from that, the scripted idea is not using requestAnimationFrame, thus could benefit from even further improvement
– GottZ
Nov 21 '18 at 12:55
@GottZ Please stop changing myinitassignment. I don't like your syntax (to each their own) and there is no benefit of using one over the other.
– Bram Vanroy
Nov 21 '18 at 13:01
while i did stop adding this back in before you wrote that comment (yes, reading the edit history helps to figure out the authors intent) i'd disagree due to one fact: if you can avoid typing out variable names over and over, it usually results in less error prone code as a result. for example: if you would copy that line somewhere else to do exactly the same but with a different variable name thaninit, you might run into the typical oversight issue of changing the other two references to that variable. sorry. i'm just avoiding such possibilities in my daily programming tasks.
– GottZ
Nov 21 '18 at 13:19
You don't need to apologise. If that is the way that you write code, that is fine - but I don't. My argument to not write it as you suggest, is because the operator+=assumes you are always adding to the variable and that its value will keep increasing. You have to read the whole line before you realise that it might actually decrease because depending on the condition, you'll getinit += -1. For me, readability is important - I want to be able to just skim through quickly and get the gist. As I said, to each their own style of coding.
– Bram Vanroy
Nov 21 '18 at 13:28
add a comment |
1
function toggleFontSize(selector, init, increase = true) {
selector.style.fontSize = `${init}px`;
const handle = setInterval(function() {
init = increase ? init + 1 : init - 1;
selector.style.fontSize = `${init}px`;
if (init == 50 && increase) {
clearInterval(handle);
toggleFontSize(selector, init, false);
} else if (init == 20 && !increase) {
clearInterval(handle);
toggleFontSize(selector, init, true);
}
}, 50);
}
toggleFontSize(document.querySelector("p"), 20);<p>Hello world.</p>However, it might be better to just use CSS animations which is definitely smoother.
p {
font-size: 20px;
animation: toggleFontSize 1.5s linear infinite alternate;
}
@keyframes toggleFontSize {
from {
font-size: 20px;
}
to {
font-size: 50px;
}
}<p>Hello world.</p>answered Nov 21 '18 at 12:50
Bram VanroyBram Vanroy
13.1k1363137
ye. css animations are the better solution. apart from that, the scripted idea is not using requestAnimationFrame, thus could benefit from even further improvement
– GottZ
Nov 21 '18 at 12:55
@GottZ Please stop changing myinitassignment. I don't like your syntax (to each their own) and there is no benefit of using one over the other.
– Bram Vanroy
Nov 21 '18 at 13:01
while i did stop adding this back in before you wrote that comment (yes, reading the edit history helps to figure out the authors intent) i'd disagree due to one fact: if you can avoid typing out variable names over and over, it usually results in less error prone code as a result. for example: if you would copy that line somewhere else to do exactly the same but with a different variable name thaninit, you might run into the typical oversight issue of changing the other two references to that variable. sorry. i'm just avoiding such possibilities in my daily programming tasks.
– GottZ
Nov 21 '18 at 13:19
You don't need to apologise. If that is the way that you write code, that is fine - but I don't. My argument to not write it as you suggest, is because the operator+=assumes you are always adding to the variable and that its value will keep increasing. You have to read the whole line before you realise that it might actually decrease because depending on the condition, you'll getinit += -1. For me, readability is important - I want to be able to just skim through quickly and get the gist. As I said, to each their own style of coding.
– Bram Vanroy
Nov 21 '18 at 13:28
add a comment |
1
1
1
function toggleFontSize(selector, init, increase = true) {
selector.style.fontSize = `${init}px`;
const handle = setInterval(function() {
init = increase ? init + 1 : init - 1;
selector.style.fontSize = `${init}px`;
if (init == 50 && increase) {
clearInterval(handle);
toggleFontSize(selector, init, false);
} else if (init == 20 && !increase) {
clearInterval(handle);
toggleFontSize(selector, init, true);
}
}, 50);
}
toggleFontSize(document.querySelector("p"), 20);<p>Hello world.</p>However, it might be better to just use CSS animations which is definitely smoother.
p {
font-size: 20px;
animation: toggleFontSize 1.5s linear infinite alternate;
}
@keyframes toggleFontSize {
from {
font-size: 20px;
}
to {
font-size: 50px;
}
}<p>Hello world.</p>answered Nov 21 '18 at 12:50
Bram VanroyBram Vanroy
13.1k1363137
function toggleFontSize(selector, init, increase = true) {
selector.style.fontSize = `${init}px`;
const handle = setInterval(function() {
init = increase ? init + 1 : init - 1;
selector.style.fontSize = `${init}px`;
if (init == 50 && increase) {
clearInterval(handle);
toggleFontSize(selector, init, false);
} else if (init == 20 && !increase) {
clearInterval(handle);
toggleFontSize(selector, init, true);
}
}, 50);
}
toggleFontSize(document.querySelector("p"), 20);<p>Hello world.</p>However, it might be better to just use CSS animations which is definitely smoother.
p {
font-size: 20px;
animation: toggleFontSize 1.5s linear infinite alternate;
}
@keyframes toggleFontSize {
from {
font-size: 20px;
}
to {
font-size: 50px;
}
}<p>Hello world.</p>function toggleFontSize(selector, init, increase = true) {
selector.style.fontSize = `${init}px`;
const handle = setInterval(function() {
init = increase ? init + 1 : init - 1;
selector.style.fontSize = `${init}px`;
if (init == 50 && increase) {
clearInterval(handle);
toggleFontSize(selector, init, false);
} else if (init == 20 && !increase) {
clearInterval(handle);
toggleFontSize(selector, init, true);
}
}, 50);
}
toggleFontSize(document.querySelector("p"), 20);<p>Hello world.</p>function toggleFontSize(selector, init, increase = true) {
selector.style.fontSize = `${init}px`;
const handle = setInterval(function() {
init = increase ? init + 1 : init - 1;
selector.style.fontSize = `${init}px`;
if (init == 50 && increase) {
clearInterval(handle);
toggleFontSize(selector, init, false);
} else if (init == 20 && !increase) {
clearInterval(handle);
toggleFontSize(selector, init, true);
}
}, 50);
}
toggleFontSize(document.querySelector("p"), 20);<p>Hello world.</p>p {
font-size: 20px;
animation: toggleFontSize 1.5s linear infinite alternate;
}
@keyframes toggleFontSize {
from {
font-size: 20px;
}
to {
font-size: 50px;
}
}<p>Hello world.</p>p {
font-size: 20px;
animation: toggleFontSize 1.5s linear infinite alternate;
}
@keyframes toggleFontSize {
from {
font-size: 20px;
}
to {
font-size: 50px;
}
}<p>Hello world.</p>answered Nov 21 '18 at 12:50
Bram VanroyBram Vanroy
13.1k1363137
edited Nov 21 '18 at 13:00
answered Nov 21 '18 at 12:50
Bram VanroyBram Vanroy
13.1k1363137
answered Nov 21 '18 at 12:50
Bram VanroyBram Vanroy
13.1k1363137
answered Nov 21 '18 at 12:50
Bram VanroyBram Vanroy
13.1k1363137
13.1k1363137
ye. css animations are the better solution. apart from that, the scripted idea is not using requestAnimationFrame, thus could benefit from even further improvement
– GottZ
Nov 21 '18 at 12:55
@GottZ Please stop changing myinitassignment. I don't like your syntax (to each their own) and there is no benefit of using one over the other.
– Bram Vanroy
Nov 21 '18 at 13:01
while i did stop adding this back in before you wrote that comment (yes, reading the edit history helps to figure out the authors intent) i'd disagree due to one fact: if you can avoid typing out variable names over and over, it usually results in less error prone code as a result. for example: if you would copy that line somewhere else to do exactly the same but with a different variable name thaninit, you might run into the typical oversight issue of changing the other two references to that variable. sorry. i'm just avoiding such possibilities in my daily programming tasks.
– GottZ
Nov 21 '18 at 13:19
You don't need to apologise. If that is the way that you write code, that is fine - but I don't. My argument to not write it as you suggest, is because the operator+=assumes you are always adding to the variable and that its value will keep increasing. You have to read the whole line before you realise that it might actually decrease because depending on the condition, you'll getinit += -1. For me, readability is important - I want to be able to just skim through quickly and get the gist. As I said, to each their own style of coding.
– Bram Vanroy
Nov 21 '18 at 13:28
add a comment |
ye. css animations are the better solution. apart from that, the scripted idea is not using requestAnimationFrame, thus could benefit from even further improvement
– GottZ
Nov 21 '18 at 12:55
@GottZ Please stop changing myinitassignment. I don't like your syntax (to each their own) and there is no benefit of using one over the other.
– Bram Vanroy
Nov 21 '18 at 13:01
while i did stop adding this back in before you wrote that comment (yes, reading the edit history helps to figure out the authors intent) i'd disagree due to one fact: if you can avoid typing out variable names over and over, it usually results in less error prone code as a result. for example: if you would copy that line somewhere else to do exactly the same but with a different variable name thaninit, you might run into the typical oversight issue of changing the other two references to that variable. sorry. i'm just avoiding such possibilities in my daily programming tasks.
– GottZ
Nov 21 '18 at 13:19
You don't need to apologise. If that is the way that you write code, that is fine - but I don't. My argument to not write it as you suggest, is because the operator+=assumes you are always adding to the variable and that its value will keep increasing. You have to read the whole line before you realise that it might actually decrease because depending on the condition, you'll getinit += -1. For me, readability is important - I want to be able to just skim through quickly and get the gist. As I said, to each their own style of coding.
– Bram Vanroy
Nov 21 '18 at 13:28
ye. css animations are the better solution. apart from that, the scripted idea is not using requestAnimationFrame, thus could benefit from even further improvement
– GottZ
Nov 21 '18 at 12:55
ye. css animations are the better solution. apart from that, the scripted idea is not using requestAnimationFrame, thus could benefit from even further improvement
– GottZ
Nov 21 '18 at 12:55
@GottZ Please stop changing my
init assignment. I don't like your syntax (to each their own) and there is no benefit of using one over the other.– Bram Vanroy
Nov 21 '18 at 13:01
@GottZ Please stop changing my
init assignment. I don't like your syntax (to each their own) and there is no benefit of using one over the other.– Bram Vanroy
Nov 21 '18 at 13:01
while i did stop adding this back in before you wrote that comment (yes, reading the edit history helps to figure out the authors intent) i'd disagree due to one fact: if you can avoid typing out variable names over and over, it usually results in less error prone code as a result. for example: if you would copy that line somewhere else to do exactly the same but with a different variable name than
init, you might run into the typical oversight issue of changing the other two references to that variable. sorry. i'm just avoiding such possibilities in my daily programming tasks.– GottZ
Nov 21 '18 at 13:19
while i did stop adding this back in before you wrote that comment (yes, reading the edit history helps to figure out the authors intent) i'd disagree due to one fact: if you can avoid typing out variable names over and over, it usually results in less error prone code as a result. for example: if you would copy that line somewhere else to do exactly the same but with a different variable name than
init, you might run into the typical oversight issue of changing the other two references to that variable. sorry. i'm just avoiding such possibilities in my daily programming tasks.– GottZ
Nov 21 '18 at 13:19
You don't need to apologise. If that is the way that you write code, that is fine - but I don't. My argument to not write it as you suggest, is because the operator
+= assumes you are always adding to the variable and that its value will keep increasing. You have to read the whole line before you realise that it might actually decrease because depending on the condition, you'll get init += -1. For me, readability is important - I want to be able to just skim through quickly and get the gist. As I said, to each their own style of coding.– Bram Vanroy
Nov 21 '18 at 13:28
You don't need to apologise. If that is the way that you write code, that is fine - but I don't. My argument to not write it as you suggest, is because the operator
+= assumes you are always adding to the variable and that its value will keep increasing. You have to read the whole line before you realise that it might actually decrease because depending on the condition, you'll get init += -1. For me, readability is important - I want to be able to just skim through quickly and get the gist. As I said, to each their own style of coding.– Bram Vanroy
Nov 21 '18 at 13:28
add a comment |
0
You can better split the increase and decrease up in parts:
See attached JSFiddle
https://jsfiddle.net/5tzafspo/5/
var change = document.querySelector("p");
change.style.fontSize = "20px";
var currentSize = 20;
var minSize = 20;
var maxSize = 50;
var intervalTime = 50;
increaseSize();
function increaseSize(){
var interval = setInterval(function(){
currentSize++;
change.style.fontSize = currentSize+"px";
if(currentSize === maxSize){
clearInterval(interval);
decreaseSize();
}
}, intervalTime);
}
function decreaseSize(){
var interval = setInterval(function(){
currentSize--;
change.style.fontSize = currentSize+"px";
if(currentSize === minSize){
clearInterval(interval);
increaseSize();
}
}, intervalTime);
}
answered Nov 21 '18 at 12:51
Wouter CoeberghWouter Coebergh
391315
add a comment |
0
You can better split the increase and decrease up in parts:
See attached JSFiddle
https://jsfiddle.net/5tzafspo/5/
var change = document.querySelector("p");
change.style.fontSize = "20px";
var currentSize = 20;
var minSize = 20;
var maxSize = 50;
var intervalTime = 50;
increaseSize();
function increaseSize(){
var interval = setInterval(function(){
currentSize++;
change.style.fontSize = currentSize+"px";
if(currentSize === maxSize){
clearInterval(interval);
decreaseSize();
}
}, intervalTime);
}
function decreaseSize(){
var interval = setInterval(function(){
currentSize--;
change.style.fontSize = currentSize+"px";
if(currentSize === minSize){
clearInterval(interval);
increaseSize();
}
}, intervalTime);
}
answered Nov 21 '18 at 12:51
Wouter CoeberghWouter Coebergh
391315
add a comment |
0
0
0
You can better split the increase and decrease up in parts:
See attached JSFiddle
https://jsfiddle.net/5tzafspo/5/
var change = document.querySelector("p");
change.style.fontSize = "20px";
var currentSize = 20;
var minSize = 20;
var maxSize = 50;
var intervalTime = 50;
increaseSize();
function increaseSize(){
var interval = setInterval(function(){
currentSize++;
change.style.fontSize = currentSize+"px";
if(currentSize === maxSize){
clearInterval(interval);
decreaseSize();
}
}, intervalTime);
}
function decreaseSize(){
var interval = setInterval(function(){
currentSize--;
change.style.fontSize = currentSize+"px";
if(currentSize === minSize){
clearInterval(interval);
increaseSize();
}
}, intervalTime);
}
answered Nov 21 '18 at 12:51
Wouter CoeberghWouter Coebergh
391315
You can better split the increase and decrease up in parts:
See attached JSFiddle
https://jsfiddle.net/5tzafspo/5/
var change = document.querySelector("p");
change.style.fontSize = "20px";
var currentSize = 20;
var minSize = 20;
var maxSize = 50;
var intervalTime = 50;
increaseSize();
function increaseSize(){
var interval = setInterval(function(){
currentSize++;
change.style.fontSize = currentSize+"px";
if(currentSize === maxSize){
clearInterval(interval);
decreaseSize();
}
}, intervalTime);
}
function decreaseSize(){
var interval = setInterval(function(){
currentSize--;
change.style.fontSize = currentSize+"px";
if(currentSize === minSize){
clearInterval(interval);
increaseSize();
}
}, intervalTime);
}
answered Nov 21 '18 at 12:51
Wouter CoeberghWouter Coebergh
391315
answered Nov 21 '18 at 12:51
Wouter CoeberghWouter Coebergh
391315
answered Nov 21 '18 at 12:51
Wouter CoeberghWouter Coebergh
391315
answered Nov 21 '18 at 12:51
Wouter CoeberghWouter Coebergh
391315
391315
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412212%2fcant-increase-decrease-font-size%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Your outer setInterval keeps running (+) even when your inner setInterval is running too (-). So in that scenario, you will always be doing +1 -1 over and over.
– Bram Vanroy
Nov 21 '18 at 12:40
so how can I stop it from doing that ? I can't figure it out.
– Sarthak Jha
Nov 21 '18 at 12:42
set the intervals into a variable and clear the outer interval when the inner one starts: developer.mozilla.org/en-US/docs/Web/API/…
– Pete
Nov 21 '18 at 12:48