CODEWITHSUNDEEP
javascript
Shinji
Shinji

Reputation: 101

undefined while testing a function

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  
}

Upvotes: 1

Views: 71

Answers (3)

Emeeus
Emeeus

Reputation: 5250

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  
}

Upvotes: 2

squiroid
squiroid

Reputation: 14027

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  
}

Upvotes: 1

Shubham Gupta
Shubham Gupta

Reputation: 2646

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>

Upvotes: 1

Related Questions