I am writing a program that needs to use a Javascript 2-dimensional array, so I built this test rig to experiment adding values into the array.
As you can see if you examine the output, the loop runs the inner loop twice and then stops, the outer loop requirement to run 10 times is not enforced.
Can anyone explain what I am doing wrong?
HTML:
<body>
<input type="button" value="Press me!" id="pressMe" onclick="primaryCommand('textBox')">
<textarea id="textBox"></textarea>
</body>
Javascript:
function primaryCommand(input){
arrayTest(input);
}
function arrayTest(input){
// How large can an array be and still be safe?
var array = new Array(new Array());
var obj = document.getElementById(input);
obj.value="";
var x = 0, y = 0;
for (x = 0; x < 10; x++)
{
for (y = 0; y < 2; y++)
{
array[x][y] = "Hello World, x='" + x + "', y='" + y + "'\n";
obj.value+=array[x][y];
}
}
}
Output:
Hello World, x='0', y='0'
Hello World, x='0', y='1'
Your outer array (indexed by x) only has one member (a single array). Try this:
function arrayTest(input){
var array = [];
var obj = document.getElementById(input);
obj.value="";
var x = 0, y = 0;
for (x = 0; x < 10; x++)
{
array[x] = [];
for (y = 0; y < 2; y++)
{
array[x][y] = "Hello World, x='" + x + "', y='" + y + "'\n";
obj.value+=array[x][y];
}
}
}
Related
I tried to code a Ceasar Cipher coder as an exercise in school.
I have encountered a problem where the letters x, y, and z come out as undefined.
function txtcipher() {
var txt = document.getElementById("txt").value;
var txtlen = txt.length;
var txtciphered = "";
var alphabet = "abcdefghijklmnopqrstuvwxyz";
for (x = 0; x < txtlen; x++) {
for (y = 0; y < alphabet.length; y++) {
if (txt[x] === alphabet[y]) {
txtciphered += alphabet[y + 3];
}
}
}
document.getElementById("cpher").value = txtciphered;
console.log(txtciphered);
}
<input id="txt" />
<button onclick="txtcipher()">Check</button><br />
<input type="text" id="cpher" readonly></input>
How do I fix this?
You need to stay in the bounds of array length of alphabet array
Instead of
y + 3
use
(y + 3) % alphabet.length
function txtcipher() {
var txt = document.getElementById("txt").value;
var txtlen = txt.length;
var txtciphered = "";
var alphabet = "abcdefghijklmnopqrstuvwxyz";
for (x = 0; x < txtlen; x++) {
for (y = 0; y < alphabet.length; y++) {
if (txt[x] === alphabet[y]) {
txtciphered += alphabet[(y + 3) % alphabet.length];
}
}
}
document.getElementById("cpher").value = txtciphered;
console.log(txtciphered);
}
<input id="txt" value="xyzabc"/>
<button onclick="txtcipher()">Check</button><br />
<input type="text" id="cpher" readonly placeholder="abcdef <-- xyzabc"></input>
You are just going out of array bounds - here:
txtciphered += alphabet[y + 3];
when y is bigger than alphabet.length - 3
I tried to make a code that returns many "9" characters to a string according to an int value.
Ej.: If "y" is equal to 5, "w" should return "99999".
I used the "for" instruction, but it makes the tab freeze.
The code:
var w = "";
var y = "";
function Calc()
{
x = document.getElementById("inputX").value;
y = document.getElementById("inputY").value;
for (var i; i = y.length; i++)
{
w += 9;
}
}
Thanks! (and sorry for my bad english).
I have updated your code. I have changed the condition in the for loop and and initialized i variable.
function Calc()
{
var w = "";
var y = "";
x = document.getElementById("inputX").value;
y = document.getElementById("inputY").value;
for (var i = 0; i < y.length; i++)
{
w += 9;
}
console.log(w);
}
X : <input type="text" id="inputX"><br>
Y : <input type="text" id="inputY"><br>
<button type="button" onclick="Calc()">Calculate</button>
I am revisiting exercise 2.3 from Eloquent Javascript, by Marijn Haverbeke.
I got one working solution, which follows below:
var size = 8;
for(var y = 0;y < size; y++) {
var c = "";
for(var x = 0;x < size; x++) {
if((y+x) % 2 == 0)
c += " ";
else
c += "#";
}
console.log( c + "\n");
}
The Author's solution is as follows:
var size = 8;
var board = "";
for (var y = 0; y < size; y++) {
for (var x = 0; x < size; x++) {
if ((x + y) % 2 == 0)
board += " ";
else
board += "#";
}
board += "\n";
}
console.log(board);
My question: What can be said about both scripts from a performance point of view (i.e. utilizes the least resources) and why?
Thanks in advance,
J
The pattern should be as follows
k_1_1
k_1_2
k_1_3
k_2_1
k_2_2
k_2_3
I can create the first block but cant figure out how to create a loop to keep going.
Any help would be appreciated.
<script>
for (var x = 1; x <= 3; x++){
var x2 = 0; x2 <=3; x2++;
var thisKName = "k_" + x2 + "_" + x + "<br>";
document.write(thisKName);
}
</script>
Initialize your counter variable outside of the for loop. Then within the for loop, have an if statement that checks if the value of x at that step is divisible by 3. x % 3 = 0 means there is no remainder and divisible by 3. Increment your counter variable.
var i = 0;
for(var x = 1; x <= 3; x++) {
if( (x - 1) % 3 == 0 ) {
i = i + 1;
}
var thisKName = "k_" + x + "_" + i + "<br>";
document.write(thisKName);
}
EDIT
Updated the function to include document.write and to avoid i from incrementing to 2 when x = 3 and messing up the structure.
Nest the loops:
for (var x = 1; x <= 3; x++){
for( var x2 = 0; x2 <=3; x2++ ){
var thisKName = "k_" + x + "_" + x2 + "<br>";
document.write(thisKName);
}
}
This bit of code doesn't seem to work.
for(var b = 0; b < wallPoints.length-1; b++)
{
wallPoints[b].xPos = wallPoints[b]-1;
}
function Point(x,y)
{
this.xPos = x;
this.yPos = y;
}
wallPoints is an array of Points
The code doesn't return any errors, it just makes all my code stop executing. This is my first time using JavaScript, so this is probably a very stupid mistake.
What are you trying to do -- shift each point by one in the x axis? You need to reference the property on the right hand side of the assignment as well.
for(var b = 0; b < wallPoints.length; b++)
{
wallPoints[b].xPos = wallPoints[b].xPos - 1;
}
or do you want to propagate the x axis from one point to another
for(var b = 1; b < wallPoints.length; b++)
{
wallPoints[b].xPos = wallPoints[b-1].xPos;
}
In the latter case, you'll need to figure out what to do with the first point. Note the change in the termination condition (and start condition in the second case).
EDIT: Here's my test code:
<html>
<head>
<title>Point</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var wallPoints = new Array();
wallPoints[0] = new Point(0,10);
wallPoints[1] = new Point(600,10);
wallPoints[2] = new Point(650,10);
var content = $('#content');
content.append('<h2>Before</h2>');
for(var b = 0; b < wallPoints.length; b++)
{
content.append('<p> x = ' + wallPoints[b].xPos + ', y = ' + wallPoints[b].yPos + '</p>' );
wallPoints[b].xPos = wallPoints[b].xPos-1;
}
content.append('<h2>After</h2>');
for(var b = 0; b < wallPoints.length; b++)
{
content.append('<p> x = ' + wallPoints[b].xPos + ', y = ' + wallPoints[b].yPos + '</p>' );
}
function Point(x,y)
{
this.xPos = x;
this.yPos = y;
}
});
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
You're assigning an X variable equal to a point. Not an option:
for(var b = 0; b < wallPoints.length-1; b++)
{
wallPoints[b].xPos = wallPoints[b]-1;
}
instead try this:
for(var b = 0; b < wallPoints.length-1; b++)
{
wallPoints[b].xPos = wallPoints[b].xPos - 1;
}