CODEWITHSUNDEEP
javascriptarraysfor-loop
ProgramLover
ProgramLover

Reputation: 91

adding <br> in certain array index - javascript

I am making a calculator program with javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        var buttonname = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "+", "-", "*", "/", "C", "Enter"];
    </script>
</head>
<body>
<script type="text/javascript">
    var n = 0;
    for (var i = 0; i < buttonname.length; i++) {
        document.write("<button>" + buttonname[i] + "</button>");
        if (i = 3 * n, n++)
            document.write("<button>" + buttonname[i] + "</button><br>");
    }
</script>
</body>
</html>

The output should be something like this:

1 2 3 4

5 6 7 8

9 0 + -

but my output is

1 2 4

5 7

8 0

/ Enter

what is the problem? I see 3,6,9,-,C buttons are disappeared but why? I just wanna make a new line when for loop passes the 3*n indexes. (Means new line after button 4,8 ... )

Upvotes: 0

Views: 1042

Answers (4)

CodingRaptor.com Employee
CodingRaptor.com Employee

Reputation: 16

Check your if block, the logic appears to be broken. Replace it with the if block below and you will be good to go.

if( (i+1) %3 == 0)
document.write("<br />");

This checks if the running index is a multiple of 3 and if so inserts newline. i+1 is required because your loops starts with 0.

You must pay special attention to the way you have structured & written your code. Sorry to say you have bad 'code handwriting'.

Output SSenter image description here

This JavaScript array tutorial is pretty nice, and has well formatted code as well.

Upvotes: 0

Jamiec
Jamiec

Reputation: 136154

document.write is a terrible way to add dynamic content to a web page, but that point aside your logic is just wrong

I just wanna make a new line when for loop passes the 3*n indexes

What you actually want is a <br/> after every 4th element in the array

for(var i = 0; i <buttonname.length; i++){
    if(i != 0 && (i%4) == 0)
       document.write("<br>");
    document.write("<button>"+buttonname[i]+"</button>");        
}


var buttonname = ["1","2","3","4","5","6","7","8","9","0","+","-","*","/","C","Enter"];

var n=0;
for(var i = 0; i <buttonname.length; i++){
    if(i != 0 && (i%4) == 0)
       document.write("<br>");
    document.write("<button>"+buttonname[i]+"</button>");
}

Upvotes: 1

Stanly
Stanly

Reputation: 673

I think this is what you are looking for: 

<!DOCTYPE html>
 <html>

<head>
<meta charset="UTF-8">
 <script type="text/javascript">
var buttonname = ["1","2","3","4","5","6","7","8","9","0","+","-","*","/","C","Enter"];
</script>
</head>
<body>
<script type="text/javascript">
var n=0;
for(var i = 0; i <buttonname.length; i++){
document.write("<button>"+buttonname[i]+"</button>");
if(i!=0 && (i+1)%3==0)
  document.write("<br>");
}
</script>

</body>
</html>

Upvotes: 0

Jason Schilling
Jason Schilling

Reputation: 476

What about using modulo ?

var buttonname = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "+", "-", "*", "/", "C", "Enter"];

for (var i = 0; i < buttonname.length; i++) {
    document.write("<button>" + buttonname[i] + "</button>");
    if (i % 4 == 3) {
        document.write("<br>");
    }
}

JSFIDDLE

Upvotes: 0

Related Questions