Using a for loop in javascript with a onclick function to print numbers 1 to 10

Question

I'm very new at all of this and I need to create a JavaScript for loop that prints out the numbers 1 to 10 when a button is clicked and -1 to -10 when another button is clicked as the attached screenshot shows.

screenshot

I've done this but I'm very stuck.

<!DOCTYPE html>
<html>

<body>

  <h1>For loop statement exercise</h1>

  <p>Press PLUS to display +1 to +10:
    <button onclick="plus()">PLUS</button>
    <p>Press MINUS to display -1 to -10:
      <button onclick="myFunction()">MINUS</button>
      <p id="i"></p>

      <script>
        for (i = 1; i <= 10; i++)

        {
          document.write("i" + < br > );
        }
      </script>

</body>

</html>

If you're totally lost, then get help, real help. Get up with your instructor and arrange for one-on-one instruction as this will help you get back on your feet the quickest way possible. Best of luck, and much success! — Randy Casburn, Dec 22 '21 at 14:51
Please refer [How to ask a good question](https://stackoverflow.com/help/how-to-ask) and add a [Minimum Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Tyler Durden, Dec 22 '21 at 14:51
`document.write("i" + < br > );` is a syntax error. Why is the variable in quotes and the string is not? — epascarello, Dec 22 '21 at 14:53
[Here's some background reading](https://stackoverflow.com/questions/2342974/when-does-the-browser-execute-javascript-how-does-the-execution-cursor-move) that tells you when the code in a ` — Wyck, Dec 22 '21 at 15:02

score 0 · Answer 1 · edited Dec 22 '21 at 15:02

I don't know if you want it to add a number every time you click or add them all in just one click, but I did this:

<!DOCTYPE html>
<html>
    <body>
        <h1>For loop statement exercise</h1>

        <p>Press PLUS to display +1 to +10:</p>
        <button onclick="plus()">PLUS</button>
        <p id="+"></p>

        <p>Press MINUS to display -1 to -10:</p>
        <button onclick="minus()">MINUS</button>
        <p id="-"></p>

        <script>
            function plus() {
                for(let i = 1; i <= 10; i++) {
                    document.getElementById("+").innerHTML += i + " ";
                }
            }

            function minus() {
                for(let i = -1; i >= -10; i--) {
                    document.getElementById("-").innerHTML += i + " ";
                }
            }
        </script>
    </body>
</html>

That is brilliant, thanks. I can see from looking at that how everything works and what I should have done in the first place. Thank you. — JimmyO, Dec 22 '21 at 15:04
If it was the answer you looked for you can accept the answer with the checkmark ! — Drakeee0909, Dec 22 '21 at 15:07

score 0 · Accepted Answer · answered Dec 22 '21 at 14:57

Try this

<!DOCTYPE html>
<html>
  <body>
    <h1>For loop statement exercise</h1>

    <p>
      Press PLUS to display +1 to +10: <button onclick="plus()">PLUS</button>
    </p>

    <p>
      Press MINUS to display -1 to -10:
      <button onclick="minus()">MINUS</button>
    </p>

    <p id="i"></p>

    <script>
      function minus() {
        for (i = -1; i >= -10; i--) {
          document.getElementById("i").innerHTML =
            document.getElementById("i").innerHTML + `${i} <br>`;
        }
      }
      function plus() {
        for (i = 1; i <= 10; i++) {
          document.getElementById("i").innerHTML =
            document.getElementById("i").innerHTML + `${i} <br>`;
        }
      }
    </script>
  </body>
</html>

Thanks very much for your help, that's great and I can see exactly what I should be doing now — JimmyO, Dec 22 '21 at 15:35

Using a for loop in javascript with a onclick function to print numbers 1 to 10

2 Answers2