javascript for loop & function

Question

I'm trying to create a page with a button that calls a function when clicked to use a for loop. Needs to loop through the code 5 times and return a page that looks like:

$
$$
$$$
$$
$

I'm struggling to get my head around it, very few examples out there that don't just focus on integers. Her's where I'm at...

<html>
<head>
  <button onclick="myFunction()">Click This Button</button>


</head>

<body>
  <p id="dollar"></p>

  <script type = "javascript/text">
    function myFunction() {
    var a;
    if(a===0) || (a===4) {
        document.write("$" + <br />);
    }
    if(a===1) || (a===3) {
        document.write("$$" + <br />);
    }   
    if (a===3) {
        document.write ("$$$" + <br />);
    }
    for (a = 0; a < 5; a++){

    }

    document.getElementById("dollar").innerHTML = text;

    }

  </script>


</body>
</html>

for starters <button> can't be in head. Next..using document.write will wipe out the whole page if used afer page is loaded — charlietfl
– charlietfl, Commented Feb 4, 2016 at 16:49
I'm not sure why this question is getting downvoted. There is a clear statement of what the OP is trying to achieve, and the OP is showing their work up to this point and asking for help. This seems fine to me. — Davin Tryon
– Davin Tryon, Commented Feb 4, 2016 at 16:49
Don't use document.write and take your <button> out of your head. — j08691
– j08691, Commented Feb 4, 2016 at 16:49

durbnpoisn · Accepted Answer · 2016-02-04 16:59:53Z

2

Your actionable stuff is outside your loop.

    function thisThing(){
        var finalIs =""
        for (a = 0; a < 5; a++){    
            if((a==0) || (a==4)) {
              finalIs += "$<br />";
           }
          if (a==3) {
                finalIs += "$$$<br />";
            }
          if((a==1) || (a==3)) {
                finalIs += "$$<br />";
            }   


        }
document.getElementById("dollar").innerHTML = finalIs;
        }

Also, you do not need to declare "a" since you are declaring it when you start your loop. Also, your document write statements were incorrect. You were setting them up as if <br /> were a variable. Which it is not. It's just the rest of the string.

EDIT: this final version works perfect. All errors fixed. You can see the differences for yourself.

edited Feb 4, 2016 at 16:59

answered Feb 4, 2016 at 16:49

durbnpoisn

4,6792 gold badges19 silver badges30 bronze badges

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

3 Comments

Draco18s no longer trusts SE Over a year ago

text is still undeclared here and does not address what should occur when a===2.

charlietfl Over a year ago

will still fail since each write will wipe out previous write's and the element won't exist either after one write

durbnpoisn Over a year ago

This is true. I fix.

Mohammad Javad · Accepted Answer · 2016-02-04 17:38:45Z

use this code for any number 5 or 7 or 9 or....

  function myFunction(cnt) {
    var text = '';
    for (var i = 0; i < cnt; i++){
        if(i<(cnt/2)){
            for (var j = 0;  j< (i+1); j++){
                text+= "$";
            }
            text+= '<br />';
        }
        else{
            for (var j = 0;  j< (cnt-i); j++){
                text+= "$";
            }
            text+= '<br />';
        }
    }
    document.getElementById("dollar").innerHTML = text;
}

for example:

    myFunction(11);

result :

$
$$
$$$
$$$$
$$$$$
$$$$$$
$$$$$
$$$$
$$$
$$
$

Example

    function callmyFunction(){
        var tmp=document.getElementById("countDollar").value;
        myFunction(+tmp);
    }
    function myFunction(cnt) {
        var text = '';
        for (var i = 0; i < cnt; i++){
            if(i<(cnt/2)){
                for (var j = 0;  j< (i+1); j++){
                    text+= "$";
                }
                text+= '<br />';
            }
            else{
                for (var j = 0;  j< (cnt-i); j++){
                    text+= "$";
                }
                text+= '<br />';
            }
        }
        document.getElementById("dollar").innerHTML = text;
    }

<input id="countDollar" value="15" />
<button onclick="callmyFunction()" >Click me!</button>

<div id='dollar'>

ankhzet · Accepted Answer · 2016-02-04 19:13:27Z

As example, use array of values:

var patterns = ['$', '$$', '$$$', '$$', '$'];
function myFunction() {
    var text = '';
    for (var i = 0; i < patterns.length; i++)
      text+= patterns[i] + '<br />';

    document.getElementById("dollar").innerHTML = text;
}

Note: the same result can be achieved by getting rid of loop:

var patterns = ['$', '$$', '$$$', '$$', '$'];
function myFunction() {
    document.getElementById("dollar").innerHTML = patterns.join('<br />') + '<br />';
}

Note: just playing...

var waiter = function (selector, framerate, patterns) {
  var element = document.querySelectorAll(selector)[0];
  
  element.style.css = "display: none";
  
  var timer, frame;
  
  return {
    tick: function () {
        element.innerHTML = '[' + patterns[frame].replace(/\s/g, '&nbsp;') + ']';
        frame = ++frame % patterns.length;
    },

    show: function () {
      frame = 0;
      if (timer)
        window.clearInterval(timer);
      
      timer = window.setInterval(function () {
        this.tick();
      }.bind(this), framerate);
      
      element.style.css = "display: block";
    },
  }
};

waiter('#waiter', 50, [
    '> -------',
    '>> ------',
    ' >> -----',
    '- >> ----',
    '-- >> ---',
    '--- >> --',
    '---- >> -',
    '----- >> ',
    '------ >>',
    '------- >',
    '------- <',
    '------ <<',
    '----- << ',
    '---- << -',
    '--- << --',
    '-- << ---',
    '- << ----',
    ' << -----',
    '<< ------',
    '< -------',
  ]).show();

waiter('#waiter2', 50, [
    '> -------',
    '>> ------',
    ' >> -----',
    '- >> ----',
    '-# >> ---',
    '-#- >> --',
    '-#-# >> -',
    '-#-#- >> ',
    '-#-#-# >>',
    '-#-#-#- >',
    '-#-#-#- <',
    '-#-#-# <<',
    '-#-#- << ',
    '-#-# << -',
    '-#- << #-',
    '-# << -#-',
    '- << #-#-',
    ' << -#-#-',
    '<< #-#-#-',
    '< -#-#-#-',
    '> -#-#-#-',
    '>> #-#-#-',
    ' >> -#-#-',
    '- >> #-#-',
    '-- >> -#-',
    '--- >> #-',
    '---- >> -',
    '----- >> ',
    '------ >>',
    '------- >',
    '------- <',
    '------ <<',
    '----- << ',
    '---- << -',
    '--- << --',
    '-- << ---',
    '- << ----',
    ' << -----',
    '<< ------',
    '< -------',
  ]).show();

waiter('#waiter3', 100, [
    '>        ',
    '>>       ',
    ' >>      ',
    '- >>     ',
    '-- >>    ',
    '--- >>   ',
    '---- >>  ',
    '----- >> ',
    '------ >>',
    '------- >',
    '-------- ',
    '---------',
    '<--------',
    ' <-------',
    '( =------',
    ' ( =-----',
    '  ( <----',
    '   ( <---',
    '    ( =--',
    '     ( =-',
    '      ( <',
    '       ( ',
    '        (',
    '         ',
  ]).show();
  
if (!String.prototype.x) {
  String.prototype.x = function (times) {
    return Array(times + 1).join(this);
  }
}
  
  
var blink =
    '  -___-  |'.x(4) +
    '  -___o  |' +
    '  -___O  |'.x(4) +
    '  -___o  |' +
    '  -___-  |' +
    '  o___o\' |' +
   ('  O___O" |'.x(2) +
    '  -___-" |').x(2) +
    '  O___O" |'.x(10) +
    '  -___-" |' +
    '  O___O  |'.x(10) +
    '  o___o  |'.x(10) +
    '  -___-  |'.x(10) +
    '  -___o  |'.x(16) +
    '  -___-  |'.x(10);

waiter('#waiter4', 100, blink.replace(/^\||\|$/, '').split('|')).show();

.waiter {
  font-family: Consolas, Courier;  
}

<div class="waiter" id="waiter"></div>
<div class="waiter" id="waiter2"></div>
<div class="waiter" id="waiter3"></div>
<div class="waiter" id="waiter4"></div>

Hasan Tareque · Accepted Answer · 2016-02-04 17:07:21Z

1

This code is work the way you wanted to acheive it. However, its not recommended. Your html code wasn't correct as you put the button on head and your javascript condition wasn't correct as you put the (). hope this helps ...

<head>
    <script>
        function myFunction() {

        var a;
        for(a=0; a<5; a++){

        if(a===0 || a===4) {
        document.write("$<br/>");
        }
        if(a===1 || a===3) {
        document.write("$$<br>");
        }   
        if (a===2) {
        document.write ("$$$<br/>");
        }
        }
        }
    </script>
</head>

<body>
    <button type="button" onclick="myFunction()">Click This Button</button>

</body>

answered Feb 4, 2016 at 17:07

Hasan Tareque

1,74111 silver badges21 bronze badges

Comments

j08691 · Accepted Answer · 2016-02-04 16:58:25Z

1

Here's a simple way using a single loop, a temp variable, and an array:

 function myFunction() {
   for (var a = 1; a <= 5; a++) {
     x = a;
     if (x > 3) x = 6 - a;
     document.getElementById("dollar").innerHTML += Array(x + 1).join("$") + '<br />';
   }
 }

<button onclick="myFunction()">Click This Button</button>
<p id="dollar"></p>

answered Feb 4, 2016 at 16:58

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

ankhzet Over a year ago

I'm wondering, which part is simplier, this: x = a; if (x > 3) x = 6 - a;, or this: Array(x + 1).join("$"). From the beginner's point of view, I meant...

Mitch · Accepted Answer · 2016-02-04 17:06:23Z

This is a fixed version using the solution you've gone for above. However, ankhzet's answer is a cleaner approach all round.

<html>
<head>
  <!-- script in head -->
  <script type = "javascript/text">
    function myFunction() {
      var a;
      var text = "";

      for ( a = 0; a < 5; a++ ){
        // if statements within the loop
        if( a === 0 || a === 4 ) { // All conditionals must be within one set of parenthesis. You can have others within, but all must be contained in one.
          text += "$<br />";
        }
        if( a === 1 || a === 3 ) {
          text += "$$<br />";
        }   
        if ( a === 2 ) {
          text += "$$$<br />";
        }
      }
      document.getElementById( "dollar" ).innerHTML = text;
    }
  </script>
</head>
<body>
  <!-- button in body -->
  <button onclick="myFunction()">Click This Button</button>
  <p id="dollar"></p>
</body>
</html>

Collectives™ on Stack Overflow

javascript for loop & function

6 Answers 6

3 Comments

Example

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Example

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related