Question

这是我在论坛上的第一篇帖子，所以如果我犯了某种错误，请善待并告诉我。

所以我正在开发一个网站，它动态地改变它的内容，这些内容来自SQL数据库。我设法从服务器接收数据作为JSON文件，我的下一个任务是用接收的内容填充页面DOM元素。问题是，我的 innerHTML 命令似乎不起作用，而我更改元素的 href 的部分确实有用。我真的很困惑，似乎无法找出问题所在。也许你可以帮助我。

HTML看起来有点像这样，想象一下有五个操作系统：

<div id="fact_0">
    <img id="fact_0_icon" src="media/icons/icon_1.svg"/>
    <p id="fact_0_text"></p> 
    <img id="fact_0_article" src="media/icons/icon_2.svg"/>
</div>

Javascript看起来如下：

function documentChange (data) {
    for(let i=0;i<5;i++) {
        document.getElementById("fact_"+i+"_text").innerHMTL= data[i].text;
        document.getElementById("fact_"+i+"_icon").setAttribute("src", "media/icons/"+data[i].icon+".svg");
        document.getElementById("fact_"+i+"_share").setAttribute("href", data[i].url);
        switch(data[i].category) {
            case "1":
                document.getElementById("fact_"+i+"_icon").style.color="#4cc40f";
                break;
            case "2":
                document.getElementById("fact_"+i+"_icon").style.color="#6767d2";
                break;
            case "3": 
                document.getElementById("fact_"+i+"_icon").style.color="#08B8DA";
                break;
            case "4": 
                document.getElementById("fact_"+i+"_icon").style.color="#e60909";
                break;
            case "5":
                document.getElementById("fact_"+i+"_icon").style.color="#a72aa4";
                break;
            default: 
                document.getElementById("fact_"+i+"_icon").style.color="#4cc40f";}}}

Answer 1

您输错了：输入 HMTL 而不是 HTML 。

因此请使用.innerHTML代替.innerHMTL。

以下是完整的解决方案：

function documentChange (data) {
    for(let i=0;i<5;i++) {
        document.getElementById("fact_"+i+"_text").innerHTML= data[i].text;
        var icon = document.getElementById("fact_"+i+"_icon");
        icon.src = "media/icons/"+data[i].icon+".svg";
        //document.getElementById("fact_"+i+"_icon").setAttribute("src", "media/icons/"+data[i].icon+".svg");
        document.getElementById("fact_"+i+"_share").setAttribute("href", data[i].url);
        switch(data[i].category) {
            case "1":
                document.getElementById("fact_"+i+"_icon").style.color="#4cc40f";
                break;
            case "2":
                document.getElementById("fact_"+i+"_icon").style.color="#6767d2";
                break;
            case "3": 
                document.getElementById("fact_"+i+"_icon").style.color="#08B8DA";
                break;
            case "4": 
                document.getElementById("fact_"+i+"_icon").style.color="#e60909";
                break;
            case "5":
                document.getElementById("fact_"+i+"_icon").style.color="#a72aa4";
                break;
            default: 
                document.getElementById("fact_"+i+"_icon").style.color="#4cc40f";}}}

Answer 2

这是你的打字错误。

使用.innerHTML并重新运行。

document.getElementById("fact_"+i+"_text").innerHTML= data[i].text;

Answer 3

将此替换为您的行 document.getElementById("fact_"+i+"_text").innerHTML= data[i].text;

innerHTML无法正常工作

3 个答案: