How to add multiple lines without wiping the whole page? - html

I would like to print out the ":::" multiple times. However, using this code, I can only print the last line. How can I print all of these lines?
<body>
<script>
function tri(){
var radius;
radius = parseInt(document.getElementById("r").value);
for (var i = 0; i < radius; i++){
for (var j = 0; j < i; j++){
document.getElementById("triOut").innerHTML = ":::";
}
document.getElementById("triOut").innerHTML = "<br>";
}
for (var i = 0; i < radius; i++){
for(var j = 0; j < radius-i; j++){
document.getElementById("triOut").innerHTML = ":::";
}
document.getElementById("triOut").innerHTML = "<br>";
}
}
</script>
Give me a number <input type="text" id="r"><button onclick="tri()"> Click here! </button>
<p id="triOut"></p>
</body>
I expect something like
:::
::::::
:::::::::
::::::
:::
Instead, I got nothing shown on the screen.

In your loops you overwrite the output when repeatedly using =. You want to concatenate with +=
function tri() {
var radius;
radius = parseInt(document.getElementById("r").value);
for (var i = 0; i < radius; i++) {
for (var j = 0; j < i; j++) {
document.getElementById("triOut").innerHTML += ":::";
}
document.getElementById("triOut").innerHTML += "<br>";
}
for (var i = 0; i < radius; i++) {
for (var j = 0; j < radius - i; j++) {
document.getElementById("triOut").innerHTML += ":::";
}
document.getElementById("triOut").innerHTML += "<br>";
}
}
Give me a number <input type="text" id="r"><button onclick="tri()"> Click here! </button>
<p id="triOut"></p>

Related

adding X amount of addChild per maxvalue in loop

The assignment is the spawn several light and dark feathers according to score points from a quiz. The light feathers symbolize the correct points (light_feather), and the dark feather are the incorrect points (dark_feather) (Each are being tracked). All the feathers are supposed to line up on one line, meaning first light feathers, followed by the dark feathers. I got the quiz dynamics figured out, and the function I have posted here is only for when they press end quiz.
var light_feather:LightFeather = new LightFeather();
var dark_feather:DarkFeather = new DarkFeather();
var good_answers:uint = 0;
var bad_answers:uint = 0;
function avsluttFunc (evt:MouseEvent)
{
var sum_LightFeatherX:Number = 0;
for (var i = 0; i < good_answers; i++) {
addChild(light_feather);
light_feather.x += 12 + (i*16);
light_feather.y = 0;
trace("Lys X-verdi: " + light_feather.x);
sum_LightFeatherX += Number(light_feather.x);
return sum_LightFeatherX;
}
trace(sum_LightFeatherX);
dark_feather.x += sum_LightFeatherX;
for (var j = 1; j <= bad_answers; j++) {
addChild(dark_feather);
dark_feather.x += 12 + (j*16);
dark_feather.y = 0;
trace("Mørk X-verdi: " + dark_feather.x);
}
/*
//Resetter poengsummen
good_answers = 0;
bad_answers = 0;
*/
}
You can do what you are looking for using only one for loop, take a look :
var good_answers:uint = 2;
var bad_answers:uint = 4;
function avsluttFunc(evt:MouseEvent)
{
for (var i:int = 0; i < good_answers + bad_answers; i++) {
var feather:DisplayObject = i < good_answers ? new LightFeather() : new DarkFeather();
feather.x += 12 + i * (feather.width + 1);
feather.y = 0;
addChild(feather);
}
}
This code example will create 4 DarkFeather instances next to 2 LightFeather ones.
Edit :
How to add your objects to an array ?
// feathers array should be accessible for both codes (adding and removing objects)
var feathers:Array = [];
for (var i:int = 0; i < good_answers + bad_answers; i++) {
var feather:DisplayObject = i < good_answers ? new LightFeather() : new DarkFeather();
addChild(feather);
feathers.push(feather);
}
then to remove them from the stage, you can do for example :
for (var i:int = 0; i < feathers.length; i++) {
var feather:DisplayObject = DisplayObject(feathers[i]);
feather.parent.removeChild(feather);
}
Hope that can help.

<PRE> TAG doesn't work?

Here, what I am doing is printing my javascript code by wrapping between "pre" tags like this :
<pre>
var sum = function(toSum) {
var j = 0;
for(var i=0; i<toSum.length; i++) {
j = j + toSum[i];
}
console.log("The sum of array is " + j);
};
sum([1,2,3,4]);
var multiply = function(toMultiply) {
var j = 1;
for(var i=0; i<toMultiply.length; i++) {
j = j * toMultiply[i];
}
console.log("The multiplication of array is " + j);
};
multiply([1,2,3,4]);
</pre>
But what I am actual getting is this :
var sum = function(toSum) {
var j = 0;
for(var i=0; i
Why is that so? How can I get "pre" tag working?
You should use < instead of <.
Similarly, use > for > and & for & when displaying in HTML.
Your for loop will be like:
for(var i=0; i<toSum.length; i++) {
...
}

Accessing variable names dynamically

I have the following scenario:
if (event.status == AMFResultEvent.SUCCESS) {
var lev1:uint = 0;
var lev2:uint = 0;
var lev3:uint = 0;
var lev4:uint = 0;
var lev5:uint = 0;
var lev6:uint = 0;
for (var i:int = 0; i < event.result.length; i++) {
if (mainLevel == "1") {
lev1++;
}
if (mainLevel == "2") {
lev2++;
}
if (mainLevel == "3") {
lev3++;
}
if (mainLevel == "4") {
lev4++;
}
if (mainLevel == "5") {
lev5++;
}
if (mainLevel == "6") {
lev6++;
}
}
for (var j:int = 1; j < 7; j++) {
_row = new StatisticsRow(event.result[j], this);
_rowsPlace.addChild(_row);
_row.y = (_row.height +1) * j;
_row.codeLevel.htmlText = j; // works as it should
// need to access variables lev1 - lev6, called by something like "lev"+j here:
_row.amount.htmlText =
}
// traces correct amounts of mainLevels from the i loop:
trace ("level 1: " + lev1);
trace ("level 2: " + lev2);
trace ("level 3: " + lev3);
trace ("level 4: " + lev4);
trace ("level 5: " + lev5);
trace ("level 6: " + lev6);
}
I'm missing something obvious here, as the ["lev"]+j doen't work. How can I dynamically acces the lev1 - lev6 in the j-loop? As the code comment at the bottoms shows, this traces as expected.
Thanks in advance!
You can access them with brackets, string concatenation, and the this keyword. Here's an example of how you would use bracket notation in a loop:
for (var i:int = 0; i <= 6; i++) {
var currLev = this["lev"+i];
// do stuff to currLev
}
Thanks for answering guys!
I had a lousy approach to my problem anyway, and should have used an array right away:
var mainLevels:Array = new Array();
for (var n:int = 1; n < 7; n++) {
mainLevels[n] = 0;
}
if (event.status == AMFResultEvent.SUCCESS) {
for (var i:int = 0; i < event.result.length; i++) {
var data = event.result[i];
var correctCode:String = data["correct"];
var mainLevelFound:uint = uint(correctCode.substr(0, 1));
for (var k:int = 1; k < 7; k++) {
if (k == mainLevelFound) {
mainLevels[k]++;
}
}
}
for (var j:int = 1; j < 7; j++) {
_row = new StatisticsRow(event.result[j], this);
_rowsPlace.addChild(_row);
_row.y = (_row.height +1) * j;
_row.codeLevel.htmlText = j;
// Now this works as a reference to mainLevels[*] created above!
_row.amount.htmlText = mainLevels[j];
}
Thanks again for your effort :)

Sumarize code to loop

i have code
dict_a[box_1_a] = text_1_a;
dict_a[box_2_a] = text_2_a;
dict_a[box_3_a] = text_3_a;
dict_a[box_4_a] = text_4_a;
dict_a[box_5_a] = text_5_a;
dict_a[box_6_a] = text_6_a;
how to summarize the code looks like this
for (var i:int = 1; i <= 6; i++)
{
dict_a[box_(i)_a] = text_(i)_a;
}
Thanks before
If boxes and texts are class members, correct syntax should be
for (var i:int = 1; i <= 6; i++)
{
dict_a[this["box_" + i + "_a"]] = this["text_" + i + "_a"];
}
To do this, you should first save your box_1_a and text objects in an array, so you can iterate over them via:
for(int i=0; i<=5; i++) {
dict_a[box_a[i]] = text_a[i];
}
I don't know if the syntax is correct for AS/Flash, but that's how it will basically work.

getting array coordinates (8 queens problem)

I am trying to make a graphic program that solves the 8 queens problem and so far what i have is the chess board
var chessBoard:Array = new Array();
for(var i:int = 0; i < 4; i++)
{
chessBoard.push(new Array(1,0,1,0,1,0,1,0));
chessBoard.push(new Array(0,1,0,1,0,1,0,1));
}
var tileSize:int = 20;
function createChessBoard():void
{
for(var i:int = 0; i < chessBoard.length; i++)
{
for(var j:int = 0; j < chessBoard[i].length; j++)
{
var tile:Sprite = new Sprite();
var tileColor:int = chessBoard[i][j] * 0xffffff;
tile.graphics.beginFill(tileColor);
tile.graphics.drawRect(0, 0, tileSize, tileSize);
tile.graphics.endFill();
tile.x = j * tileSize;
tile.y = i * tileSize;
addChild(tile);
}
}
}
createChessBoard();
(thanks André for this code)
this creates a black and white checkered board for the problem but now i need to be able to place the queens. How am i able to see where the user clicks in order to put the queen in the box that is clicked on?
(sorry if my question isn't fully clear)
I added a very simple example to your question. See below:
var chessBoard:Array = new Array();
for(var i:int = 0; i < 4; i++)
{
chessBoard.push(new Array(1,0,1,0,1,0,1,0));
chessBoard.push(new Array(0,1,0,1,0,1,0,1));
}
var tileSize:int = 20;
function createChessBoard():void
{
for(var i:int = 0; i < chessBoard.length; i++)
{
for(var j:int = 0; j < chessBoard[i].length; j++)
{
var tile:Sprite = new Sprite();
var tileColor:int = chessBoard[i][j] * 0xffffff;
tile.graphics.beginFill(tileColor);
tile.graphics.drawRect(0, 0, tileSize, tileSize);
tile.graphics.endFill();
//I added the name property and a MouseEvent.CLICK event listener
tile.name = "tile__" + i + "_" j + "_sp";
tile.addEventListener(MouseEvent.CLICK, onTileClick);
tile.x = j * tileSize;
tile.y = i * tileSize;
addChild(tile);
}
}
}
function onTileClick(event:MouseEvent):void
{
//This tells you which tile the user clicked on
trace(event.target.name);
};
createChessBoard();
Good luck,
Rob