学习JS代码firstChild方法引用问题记录

在跟着视频学习JS代码的路上，今天犯的错误折磨我很久

首先看正确的代码

//当鼠标点击单价单元格时进行价格编辑 function editPrice(){ if(event && event.srcElement && event.srcElement.tagName=="TD"){ var priceTD = event.srcElement ; //目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3 ElementNode对应的是1 if(priceTD.firstChild && priceTD.firstChild.nodeType==3){ //innerText 表示设置或者获取当前节点的内部文本 var oldPrice = priceTD.innerText ; //innerHTML 表示设置当前节点的内部HTML priceTD.innerHTML="<input type=text size=4/>"; // <td><input type=text size=4/></td> var input = priceTD.firstChild; if(input.tagName=="INPUT"){ input.value = oldPrice ; //选中输入框内部的文本 input.select(); //4.绑定输入框失去焦点事件 , 失去焦点，更新单价 input.οnblur=updatePrice ; } } } }

生成的效果 可以进行编辑

我自己写的代码

//当鼠标点击单价单元格时进行价格编辑
function editPrice() {
  //event : 当前发生的事件
  //event.srcElement : 事件源
  // alert(event.srcElement);
  //alert(event.srcElement.tagName);	--> TD

  //调用匿名函数绑定priceTD事件
  //   alert(event.srcElement.tagName)
  if (event && event.srcElement && event.srcElement.tagName == "TD") {
    var priceTD = event.srcElement;

    //目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3  ElementNode对应的是1
    if (priceTD.firstChird && priceTD.firstChird.nodeType == 3) {
      //innerText 表示设置或者获取当前节点的内部文本
      var oldPrice = priceTD.innerText;

      //innerHTML 表示设置当前节点的内部HTML
      //priceTD.innerHTML = "<input type =text size =4/>";
      priceTD.innerHTML="<input type=text size=4/>";

      // <td><input type=text size=4/></td>
      var input = priceTD.firstChird;
      if (input.tagName == "INPUT") {
        input.value = oldPrice;
        //选中输入框内部的文本
        input.select();
        //4.绑定输入框失去焦点事件 , 失去焦点，更新单价
        input.onblur = updatePrice;
      }
    }
  }
}

注意看 我写成了priceTD.firstChird 方法，引用错误，导致方法一直无法生效，我看了很多遍，都没有发现问题

真是代码虐我千百遍，我待代码如初恋！