undefined while testing a function

Question

so I've been working on functions making star patterns and somehow I keep getting "undefined" when i ´innerHTML´ it. Can anyone help me to see what I'm doing wrong here?

pOutput.innerHTML = square(3);
poutput.innerHTML = rectangle(2,3);

function square(x) {
var z;
for (var i = 1; i<=x; i++) {
    for ( var j = 1; j<=x; j++) {
        z += "*";
    }
    z += "<br>";
}  
return z
}

function rectangle(x, y) {
var z;
for (var i = 1; i<=x; i++) {
    for ( var j = 1; j<=y; j++) {
        z += "*";
    }
    z += "<br>";
}  
return z  
}

Sidenote, For better practices you should add semicolons ; to your returns. Also don't name variables that only differ with case (poutput vs pOutput). poutput isn't a very descriptive name anyway. Your first function can also be shortened down to 1 line: return rectangle(x, x); :-) — dustytrash
– dustytrash, Commented Sep 25, 2018 at 18:53

Emeeus · Accepted Answer · 2018-09-25 18:47:43Z

2

You should do var z = "" otherwise the value is undefined, see this:

var z;

console.log(z)

Full example:

console.log(square(3));
console.log(rectangle(2,3));

function square(x) {
var z = "";
for (var i = 1; i<=x; i++) {
    for ( var j = 1; j<=x; j++) {
        z += "*";
    }
    z += "<br>";
}  
return z
}

function rectangle(x, y) {
var z = "";
for (var i = 1; i<=x; i++) {
    for ( var j = 1; j<=y; j++) {
        z += "*";
    }
    z += "<br>";
}  
return z  
}

answered Sep 25, 2018 at 18:47

Emeeus

5,2922 gold badges30 silver badges42 bronze badges

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

Comments

Shubham Gupta · Accepted Answer · 2018-09-25 18:45:47Z

Look at the following snippet where I have fixed your code. You need to initialize z with empty string.

var z = "";

If it is undefined following thing went wrong

z += "*" -> z is undefined so z = "undefined" + "*"

document.getElementById("square").innerHTML = square(3);
document.getElementById("rectangle").innerHTML = rectangle(2, 3);

function square(x) {
  var z = "";
  for (var i = 1; i <= x; i++) {
    for (var j = 1; j <= x; j++) {
      z += "*";
    }
    z += "<br/>";
  }
  return z
}

function rectangle(x, y) {
  var z = "";
  for (var i = 1; i <= x; i++) {
    for (var j = 1; j <= y; j++) {
      z += "*";
    }
    z += "<br/>";
  }
  return z
}

Square
<div id="square"></div>

<br/><br/> Rectangle
<div id="rectangle"></div>

squiroid · Accepted Answer · 2018-09-25 18:45:58Z

1

Initialize z with "" default value of z is undefined at var z;

var pOutput = document.getElementById('pOutput')
var poutput = document.getElementById('poutput')
pOutput.innerHTML = square(3);
poutput.innerHTML = rectangle(2,3);

function square(x) {
var z = "";
for (var i = 1; i<=x; i++) {
    for ( var j = 1; j<=x; j++) {
        z += "*";
    }
    z += "<br>";
}  
return z
}

function rectangle(x, y) {
var z = "";
for (var i = 1; i<=x; i++) {
    for ( var j = 1; j<=y; j++) {
        z += "*";
    }
    z += "<br>";
}  
return z  
}

answered Sep 25, 2018 at 18:45

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

Collectives™ on Stack Overflow

undefined while testing a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related