Javascript array inputing and display user defined data

Question

I am a trying to write a program for my class that asks the users for a keyboard character and then for number of rows and columns, then displays the character in a rectangle shape based on the rows and columns.

var keyBoardInput = prompt("Pick a key on your keyboard to display");
var x = prompt("How many rows?");
var y = prompt("How many columns?");

rectangleX = new Array(x);
rectangleY = new Array(y);

for(var i =0; i < rectangleX.lenght; i++)
    {
    rectangleX.push(keyBoardInput);
    }

for(var j =0; j < rectangleY.lenght; j++)
   {
   rectangleY.push(keyBoardInput);
   }

I'm not sure how to get it to output so say if there was 3 rows and 2 columns and the user chose a as the keyboard input, I would need an output of something like:

aaa
aaa

document.write() has been the norm but im not sure how to get to display in the rectangle way like the AAAs in the post — Joshua Walters
– Joshua Walters, Commented Nov 6, 2015 at 16:10

juvian · Accepted Answer · 2015-11-06 16:20:57Z

1

That would be 2 rows and 3 columns, but if it´s just always the same letter, you can just make a double loop iterating your rows and columns, and set the corresponding text that you want to output:

var x = 2
var y = 3


html = '';

for(var i =0; i < x; i++){ // for each row
    for(var j =0; j < y; j++){ // we add a 'a' for each column in the row
            html+= 'a'
    } 
    // we already made a row, now we need a new line for the next row to show in the next line
	html+='<br/>'
}


var newParagraph = document.createElement('p'); // we create a paragraph element
    newParagraph.innerHTML = html; // set the html we made
document.body.appendChild(newParagraph); // and add it to the dom

And with ecmascript6 we could use a one liner solution taking advantage of the string repeat function:

html = ('a'.repeat(y)+'<br/>').repeat(x)

answered Nov 6, 2015 at 16:20

juvian

16.1k2 gold badges42 silver badges40 bronze badges

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

3 Comments

Joshua Walters Over a year ago

The letter to be displayed as well as the rows(x) and columns(y) are all user defined.

juvian Over a year ago

@JoshuaWalters yeah, replace the 'a' with your keyBoardInput variable and prompt for x and y instead of fixed values, was just showing an example

Joshua Walters Over a year ago

ok thank you i for got a bracket and it wasnt running so i thought it was the variable change

Nonemoticoner · Accepted Answer · 2015-11-06 16:21:53Z

0

You should do something like that:

var output = "";

for(var i = 0; i <3; i++){
  for(var j = 0; j <3; j++){
    output +="A";
  }
  output+="<br>";
}

document.write(output);

The result will be:

AAA
AAA
AAA

answered Nov 6, 2015 at 16:21

Nonemoticoner

6485 silver badges14 bronze badges

Comments

Wollhaar · Accepted Answer · 2015-11-06 16:32:50Z

0

or other way with

alert(rectangleX + '\n' + rectangleY);

or

console.log(rectangleX + '\n' + rectangleY);

edited Nov 6, 2015 at 16:32

answered Nov 6, 2015 at 16:25

Wollhaar

1823 silver badges23 bronze badges

1 Comment

juvian Over a year ago

This won´t actually work with x = 10 and y = 10, for example

Joshua Walters · Accepted Answer · 2015-11-06 16:59:18Z

var x = 2
var y = 3


html = '';

for(var i =0; i < x; i++){ // for each row
    for(var j =0; j < y; j++){ // we add a 'a' for each column in the row
            html+= 'a'
    } 
    // we already made a row, now we need a new line for the next row to show in the next line
	html+='<br/>'
}


var newParagraph = document.createElement('p'); // we create a paragraph element
    newParagraph.innerHTML = html; // set the html we made
document.body.appendChild(newParagraph); // and add it to the dom

var BR = "<br />";  // Line break
var ES = "";        // Empty space
var PA = "<p />";   // full paragraph break

// Program heading

// Get inputs
var keyBoardInput = prompt("Pick a key on your keyboard to display");
var x = prompt("How many rows?");
var y = prompt("How many columns?");
var html = "";

rectangleX = new Array(x);
rectangleY = new Array(y);

for(var i =0; i < x; i++)
	{ // for each row
    for(var j =0; j < y; j++)
	{ // we add a 'a' for each column in the row
            html+= keyBoardInput
    } 
    // we already made a row, now we need a new line for the next row to show in the next line
	html+='<br/>'
}
	


// do the maths, and display the results
var newParagraph = document.createElement('p'); // we create a paragraph element
    newParagraph.innerHTML = html; // set the html we made
document.body.appendChild(newParagraph); // and add it to the dom
// thank user and end the program
document.write(PA + "Thank you for using this program. Good-bye!");

Here is the final working program thank you for all who helped with it.

Collectives™ on Stack Overflow

Javascript array inputing and display user defined data

4 Answers 4

3 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related