javascript - 如何在 javascript 中多次获取更改 innerHTML 的链接

Question

每次单击时，我都试图获取一个链接来更改 javascript innerHTML。

function id_1(a){
    var id = document.getElementById(a);
    if (id.innerHTML==="innerHTML2"){
        id.innerHTML="innerHTML1";
    }
    if (id.innerHTML==="innerHTML1"){
        id.innerHTML="innerHTML2";
    }
}

<a id="id" href="javascript:id_1('id')">innerHTML1</a>

我希望它从 innerHTML1 变为 innerHTML2 变为 innerHTML1 变为 innerHTML2 等等链接。

现在它只从 innerHTML1 切换到 innerHTML2

Answer 1

第二个 if 语句需要使用 else if。

第二次点击时代码中的逻辑如下所示(当内容为 innerHTML2 时):

1. 第一个 if 语句测试内容是否为 innerHTML2，如果是 innerHTML2，则内容将更改为 innerHTML1(您想要的内容)。
2. 第二个 if 语句测试内容是否为 innerHTML1，它是(因为它刚刚在步骤 1 中更改)所以内容被改回 innerHTML1(不是您想要的)。

所以解决方案应该如下所示:

function id_1(a){
    var id = document.getElementById(a); 
    if (id.innerHTML=="innerHTML2"){
        id.innerHTML="innerHTML1";
    }else if (id.innerHTML=="innerHTML1"){
        id.innerHTML="innerHTML2";
    }
}

为了强调这一点，您可以保持代码不变，但使用 return 来确保只使用一个 if 语句。

function id_1(a){
    var id = document.getElementById(a); 
    if (id.innerHTML=="innerHTML2"){
        id.innerHTML="innerHTML1";
        return;
    }

    if (id.innerHTML=="innerHTML1"){
        id.innerHTML="innerHTML2";
        return;
    }
}