コンソールのエラー メッセージは次のとおりです。
意味: Uncaught TypeError: 未定義のプロパティを読み取ることができません ('appendchild' を読み取ります)
つまり、appendChild を使用する場合、親要素にこの属性がないため、使用できません。
この時点で、要素が間違っているか、ロジック上の問題があるかを確認する必要があります。
この時点での私のjsコードは次のとおりです: (エラーの原因となっている部分のみが表示されます)
// 页面初始化
bindData(classList);
// 获取元素
var kecheng = document.querySelector(".classlist .kecheng");
// 数据绑定
// data:数据(数组)
function bindData(data) {
// 循环遍历数组
data.forEach(function(val, index) {
// console.log(val,index);
// 创建章
var div = document.createElement("div");
// 设置类名
div.className = "detail";
// 赋值内容
div.innerHTML =
`<p class="title">${val.title}(含${val.num}期)<i class="iconfont iconupanddown ${index < 3 ?'icon-top1':'icon-down'}"></i></p>`;
// 创建ul
var ul = document.createElement("ul");
// 设置类名
ul.className = index < 3 ? "active" : "";
// 创建节
// console.log(val.list);
val.list.forEach(function(cur) {
// 创建li
var li = document.createElement("li");
// 给当前这个li赋值内容
li.innerHTML = `<p>
<i class="iconfont icon-bofang"></i>
<span>${cur.name}</span>
</p>
<p>
<span>${cur.time}开播</span>
<span class="start">播放视频</span>
</p>`;
// 添加到ul中
ul.appendChild(li);
});
// 将ul添加到div中
div.appendChild(ul);
// 将div添加到kecheng中
kecheng.appendChild(div);
});
上の図からわかるように、呼び出しメソッドの後ろに取得要素を記述しており、エラーが報告されたときにプロンプトが表示される行数に対応する内容は、kecheng. 間違っています。
事前解析の概念によると、実際に実行される前に、var と function を事前にロードするコードです。(var は宣言のみで定義はしません、関数は宣言と定義を行います)
コードが実行される前のプリロードでは、関数bindData(classList)が最初に呼び出され、その後コースが定義されることが知られているため、関数bindDataの最後の行のkechengはまだ定義されていません。(プリロードの考え方はおおよそ以下の通りです)
したがって、要素を取得した後に関数呼び出しを行うことで、この種のエラーを回避できます。次のように:
// 获取元素
var kecheng = document.querySelector(".classlist .kecheng");
// 页面初始化
bindData(classList);
(プログラミング初心者なので、間違いがあれば修正してください、ありがとうございます~)