Javascript - Header font size change using for loop

Question

I would like some help with the following code.

What it's supposed to do is to create a button on a site that when pressed displays the same message, each time using one of the headers h6 to h1.

Here's the code.

<p>
<button type="button" onClick="headers()"> Show Headers</button>
<script> function headers() {
for(num = 6; num > 0 ; num--) {
  num.toString();
  document.write("<p>" + "<h(num)>" + "Message") <!-- That is the part that I cannot make to work. I wanted the num in the <hnum> to change as the for loop progresses so I can have h6 h5 h4...etc, dunno if it's possible to do it that way though :/  -->
  }
}
</script>
</p>

Adam Buchanan Smith · Accepted Answer · 2015-12-15 22:39:55Z

0

You were close! see this: https://jsfiddle.net/mm6ck3dc/

for(num = 6; num > 0 ; num--) {
  document.write("<p>" + "<h"+num+">" + "Message");
  }

answered Dec 15, 2015 at 22:39

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yadielar · Accepted Answer · 2015-12-15 22:42:09Z

0

The loop you're trying to write should look like this:

for(var num = 6; num > 0; num--) {
  document.write("<h"+num+">" + "Message" + "</h"+num+">");
}

Also, there's no need for the heading element to be nested inside the <p> element.

answered Dec 15, 2015 at 22:42

yadielar

831 silver badge7 bronze badges

Comments

Johannes · Accepted Answer · 2015-12-15 22:47:20Z

0

Another EDIT: Actually you also need the end tag, and you won't need the <p> :

document.write("<h" + num + ">" + "Message" + "</h" + num + ">");

edited Dec 15, 2015 at 22:47

answered Dec 15, 2015 at 22:41

Johannes

67.9k22 gold badges85 silver badges139 bronze badges

Comments

Paul Roub · Accepted Answer · 2021-09-06 13:30:02Z

0

To understand Why I wrote \x3Cp instead of "<" read this: Why use \x3C instead of < when generating HTML from JavaScript?

for(num = 6; num > 0 ; num--) {
  num.toString();

  document.write("\x3Cp>" + "\x3Ch(num)>" + "Message")
}

edited Sep 6, 2021 at 13:30

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered Sep 6, 2021 at 13:22

Hady Salah

7610 bronze badges

2 Comments

Community Over a year ago

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution.

Hady Salah Over a year ago

Ok i will try next time , Thanks For Your advice

Collectives™ on Stack Overflow

Javascript - Header font size change using for loop

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related