今天初学JavaScript和html,就直接踩坑了,很是郁闷,写一个乘法口诀表就写了一下午,纠结了一下午为什么innerHTML总是为空,后来算是解决了,原来就是js加载顺序的原因
**错误**html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<button >生成乘法口诀表</button>
<table id="table1" border="1" ">
<caption><h2>欢迎前来学习小学三年级乘法口诀表</h2></caption>
</table>
</body>
</html>
**错误**js代码
var strCode = "";
for (var i = 1; i<=9; i++) {
strCode = strCode + "<tr>";
for (var j = 1; j<=i; j++) {
var temp = "<td>" + j + "*" + i + "=" + (i*j) + "</td>";
strCode = strCode + temp;
}
strCode = strCode + "</tr>";
}
strCode = strCode + "";
console.log(strCode);
document.getElementById("table1").innerHTML+=strCode;
错误结果:
"Uncaught TypeError: Cannot read property 'innerHTML' of null"
错误原因:
详情注释在了图中↓↓↓。
最终正确的代码:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<button onclick="setTable()">生成乘法口诀表</button>
<table id="table1" border="1" style="display: none;">
<caption><h2>欢迎前来学习小学三年级乘法口诀表</h2></caption>
</table>
</body>
</html>
js代码:
var strCode = "";
for (var i = 1; i<=9; i++) {
strCode = strCode + "<tr>";
for (var j = 1; j<=i; j++) {
var temp = "<td>" + j + "*" + i + "=" + (i*j) + "</td>";
strCode = strCode + temp;
}
strCode = strCode + "</tr>";
}
strCode = strCode + "";
console.log(strCode);
var flag = true;
function setTable () {
if(flag == true){
flag = false;
document.getElementById("table1").innerHTML+=strCode;
document.getElementById("table1").style.display = "block";
}
}
结果: