Fatal编程技术网
  • javascript/
  • Javascript 无法读取属性'；追加儿童'；已加载但仍不工作的null-DOM的

Javascript 无法读取属性'；追加儿童'；已加载但仍不工作的null-DOM的

javascript

Javascript 无法读取属性'；追加儿童'；已加载但仍不工作的null-DOM的,javascript,Javascript,我知道这是一个严重的错误，但我似乎无法摆脱它。我的元素productprice应该可以很好地加载到DOM中。在我看来，所有的语法都是正确的。这段代码的要点是在一个表中显示JSON数据，以便形成通用购物网站的产品页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Min Shop</title> </head> <body>

我知道这是一个严重的错误，但我似乎无法摆脱它。我的元素productprice应该可以很好地加载到DOM中。在我看来，所有的语法都是正确的。这段代码的要点是在一个表中显示JSON数据，以便形成通用购物网站的产品页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Min Shop</title>
</head>
<body>
  <div id="products">
    <table id="prodtable">
      <tr id="headers">
        <th id="prodnameheader">Name </th>
        <th id= "proddescheader">Description  </th>
        <th id= "prodpriceheader">Price  </th>
        <th id= "prodcategory">Category  </th>
        <th id="firstprodimgeheader">1st image  </th>
        <th id="secondprodimageheader">2nd image  </th>
        <th id="thirdprodimageheader">3rd image  </th>
        <td id="productname"></th>
      </tr>
      <tr id="name">
      </tr>
      <tr id="description">
      <tr>
      <tr id="price">
      </tr>
    </table>
  </div>
  <script>
  function get_json(fileName, callback){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
      if (xmlhttp.status == 200) {
        if(typeof callback == "function"){
          callback(JSON.parse(xmlhttp.responseText));
        }
      } else {
        console.error("Could Not Read JSON, error: " + 
xmlhttp.status);
      }
    }
    };
  xmlhttp.open("GET", fileName, true);
  xmlhttp.send();
   }


  function display_json(obj){
    var x = 0;
    for (i in obj.products){
      var prodname = 
    document.createTextNode(JSON.stringify(obj.products[x].name));
      var prodprice = 
document.createTextNode(JSON.stringify(obj.products[x].price));
      var proddesc = 
document.createTextNode(JSON.stringify(obj.products[x].description));

      var tablename = document.createElement("td");
      tablename.setAttribute("id","productname");

      var tableprice = document.createElement("td");
      tableprice.setAttribute("id","productprice");

      var tabledescription = document.createElement("td");
      tabledescription.setAttribute("id","productdescription");

      tablename.appendChild(prodname);
      tableprice.appendChild(prodprice);
      tabledescription.appendChild(proddesc);

      document.getElementById("productname").appendChild(prodname);
      document.getElementById("productprice").appendChild(prodprice);

document.getElementById("productdescription").appendChild(proddesc);

      for (c in obj.products.images){
        var firstprodimge = 
document.createTextNode(JSON.stringify(obj.products[x].images[0]));
        var secondprodimage = 
document.createTextNode(JSON.stringify(obj.products[x].images[1]));
        var thirdprodimage = 
document.createTextNode(JSON.stringify(obj.products[x].images[2]));
        }
        x++;
      }
  }
  window.onload = function(){
    get_json("products.json",display_json);
  }
  </script>

</body>
</html>


闵行
名称
描述
价格
类别
第一图像
第二图像
第三图像
函数get_json（文件名，回调）{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==XMLHttpRequest.DONE）{
if（xmlhttp.status==200）{
if（回调类型==“函数”）{
回调（JSON.parse（xmlhttp.responseText））；
}
}否则{
错误（“无法读取JSON，错误：”+
xmlhttp.status）；
}
}
};
open（“GET”，文件名，true）；
xmlhttp.send（）；
}
函数显示（obj）{
var x=0；
用于（对象产品中的i）{
变量prodname=
createTextNode（JSON.stringify（obj.products[x].name））；
var产品价格=
createTextNode（JSON.stringify（obj.products[x].price））；
var proddesc=
createTextNode（JSON.stringify（obj.products[x].description））；
var tablename=document.createElement（“td”）；
tablename.setAttribute（“id”、“productname”）；
var tableprice=document.createElement（“td”）；
tableprice.setAttribute（“id”、“productprice”）；
var tabledescription=document.createElement（“td”）；
tabledescription.setAttribute（“id”、“productdescription”）；
tablename.appendChild（prodname）；
tableprice.appendChild（产品价格）；
tabledescription.appendChild（产品描述）；
document.getElementById（“productname”）.appendChild（prodname）；
document.getElementById（“productprice”）.appendChild（prodprice）；
document.getElementById（“productdescription”）.appendChild（proddesc）；
用于（对象产品图像中的c）{
var firstprodimge=
document.createTextNode（JSON.stringify（obj.products[x].images[0]）；
var secondprodimage=
createTextNode（JSON.stringify（obj.products[x].images[1]）；
变量thirdprodimage=
createTextNode（JSON.stringify（obj.products[x].images[2]）；
}
x++；
}
}
window.onload=函数（）{
获取_json（“products.json”，display_json）；
}
这里呢

 <tr id="name">
 </tr>
 <tr id="description">
 <tr>
 <tr id="price">
 </tr>
是明显的错误…

您不需要使用
.setAttribute（）
来设置元素节点的“id”。只需
tablename.id=“productName”
会的。
productprice
不在dom中。对，您必须先将新的
元素添加到dom中，然后才能在
文档中找到它们。为什么它当前不在dom中？我没有做我应该做的事情是什么？你没有将tablename、tableprice、tabledescription附加到现有的dom中。怎么会这样？如何纠正故障？应匹配，而不是，并且应关闭，而不是在描述处再次打开。。

 <tr id="name">
 </tr>
 <tr id="description">
 <tr>
 <tr id="price">
 </tr>