Js在我的网站上没有像预期的那样工作，即使它在codepen上工作
Js在我的网站上没有像预期的那样工作，即使它在codepen上工作
提问于 2018-09-10 06:18:39
我试图设计一个js算法来覆盖我的产品详细信息页面上现有的HTML。这是需要后XML集成到我的网站，我想可视化这个规格为表，但在XML集成后，它只允许在我的网站上存储为HTML的段落标签。
所以；
这是我的代码，它在codepen上工作得很好，但在我的wordpress网站上就不行了。
JS
var a,b,c,d,e,f;
var bazes = document.getElementById("prd-desc").getElementsByTagName("div")[0].getElementsByTagName("p") ;
var bazes_t = document.getElementById("prd-desc").getElementsByTagName("div")[0];
a = bazes[0].innerText;
b = bazes[1].innerText;
c = bazes[2].innerText;
d = bazes[3].innerText;
e = bazes[4].innerText;
f = bazes[6].innerText;
//console.log(c);
bazes_t.innerHTML = '<div class ="outer-box"> <table id="urun_inf"> <tr> <td class="col1-head"> Kod </td> <td class="col2-desc">a</td> </tr> <tr> <td class="col1-head"> Ebat </td> <td class="col2-desc"> Açıklama2 </td> </tr> <tr> <td class="col1-head"> Reklam Alanı</td> <td class="col2-desc"> Açıklama3 </td> </tr> <tr> <td class="col1-head"> Renk </td> <td class="col2-desc"> Açıklama4 </td> </tr> <tr> <td class="col1-head"> Merkez Stok </td> <td class="col2-desc"> Açıklama5 </td> </tr> <tr> <td class="col1-head"> Toplam Stok </td> <td class="col2-desc"> Açıklama6 </td> </tr> </table> </div><style> .outer-box{ border : 2px solid; border-style : groove; width : %100; height : auto;}.col1-head,.col2-head{ font-weight : bold; color : blue;}.col1-desc::before,.col2-desc::before{ content : ":";}</style>';
console.log(bazes_t.getElementsByTagName("td")[1].innerText);
bazes_t.getElementsByTagName("td")[1].innerText = a;
bazes_t.getElementsByTagName("td")[3].innerText = b;
bazes_t.getElementsByTagName("td")[5].innerText = c;
bazes_t.getElementsByTagName("td")[7].innerText = d;
bazes_t.getElementsByTagName("td")[9].innerText = e;
bazes_t.getElementsByTagName("td")[11].innerText =f;<div data-id="6f6ba5e" class="elementor-element elementor-element-6f6ba5e elementor-widget elementor-widget-product-description" id="prd-desc" data-element_type="product-description.default">
<div class="elementor-widget-container">
<p>Lacivert</p>
<p>Bisiklet Yaka Lacivert Tişört</p>
<p>M Beden</p>
<p>1458</p>
<p>1458</p>
<p> </p>
<p>* %100 Pamuklu * 30/1 Süprem Kumaş * İstenilen renk ve bedenlerde dikim yapılır * Yandan Dikişli * 145 gr.</p>
</div>
</div>
所以这段代码在codepen或这里看起来很棒。我通过Elementor在我的OceanWP wordpress网站上实现了这段代码，以“Woocommerce的单一产品页面”，我可以用一个插件重新设计这个页面。(它允许我向这个页面添加一个元素或自定义超文本标记语言，并且我在'script /script‘标签中实现了这段代码)
每个产品都有独特的规格，所以这个JS必须获取每个产品页面的数据，并将其显示为表格，如上面的代码所示。
在此之前，非常感谢，
结果表明，C.
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-10 06:29:31
不确定你想用这段代码做什么，只需要改变你的javascript代码(只需要添加window.onload，它就可以工作了。
window.onload = function(){
var a,b,c,d,e,f;
var bazes = document.getElementById("prd-desc").getElementsByTagName("div")[0].getElementsByTagName("p");
var bazes_t = document.getElementById("prd-desc").getElementsByTagName("div")[0];
a = bazes[0].innerText;
b = bazes[1].innerText;
c = bazes[2].innerText;
d = bazes[3].innerText;
e = bazes[4].innerText;
f = bazes[6].innerText;
//console.log(c);
bazes_t.innerHTML = '<div class ="outer-box"> <table id="urun_inf"> <tr> <td class="col1-head"> Kod </td> <td class="col2-desc">a</td> </tr> <tr> <td class="col1-head"> Ebat </td> <td class="col2-desc"> Açıklama2 </td> </tr> <tr> <td class="col1-head"> Reklam Alanı</td> <td class="col2-desc"> Açıklama3 </td> </tr> <tr> <td class="col1-head"> Renk </td> <td class="col2-desc"> Açıklama4 </td> </tr> <tr> <td class="col1-head"> Merkez Stok </td> <td class="col2-desc"> Açıklama5 </td> </tr> <tr> <td class="col1-head"> Toplam Stok </td> <td class="col2-desc"> Açıklama6 </td> </tr> </table> </div><style> .outer-box{ border : 2px solid; border-style : groove; width : %100; height : auto;}.col1-head,.col2-head{ font-weight : bold; color : blue;}.col1-desc::before,.col2-desc::before{ content : ":";}</style>';
console.log(bazes_t.getElementsByTagName("td")[1].innerText);
bazes_t.getElementsByTagName("td")[1].innerText = a;
bazes_t.getElementsByTagName("td")[3].innerText = b;
bazes_t.getElementsByTagName("td")[5].innerText = c;
bazes_t.getElementsByTagName("td")[7].innerText = d;
bazes_t.getElementsByTagName("td")[9].innerText = e;
bazes_t.getElementsByTagName("td")[11].innerText =f;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52249060
复制相关文章
相似问题
腾讯云开发者
