测试功能时未定义

Question

所以我一直在研究制作星形图案的函数，当我使用“ innerHTML”时，总是以某种方式变得“未定义”。 有人可以帮我看看我在做什么错吗？

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  
}

Answer 1

您应该执行var z = ""否则该值是undefined ，请参见：

 var z; console.log(z) 

完整示例：

 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 } 

Answer 2

请查看以下代码段，其中已修复您的代码。 您需要使用空字符串初始化z。

var z = "";

如果未定义，则出现以下错误

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> 

Answer 3

初始化z与“”的默认值z是undefined的变种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  
}