javascript - 一些元素没有被改变，即使它们应该被改变

Question

我想这样做，当我按下一个按钮并使一个元素出现时，然后按下另一个并使另一个元素出现，但它不起作用。我目前的代码是这样的：

function login() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if (username == "Ethan" && password == "Horton") {
        document.getElementById("test").innerHTML = "Logged In: Ethan";
        document.getElementById("p1").style.visibility = "hidden";
        document.getElementById("Logout").style.visibility = "visible";
    } else if (username == "Person" && password == "Password") {
        document.getElementById("test").innerHTML = "Logged In: Person";
        document.getElementById("p1").style.visibility = "hidden";
        document.getElementById("p1").style.visibility = "hidden";
        document.getElementById("Logout").style.visibility = "visible";
    } else {
        alert("Incorrect User/Pass");
    }
}

正如你所看到的，我需要改变很多东西，但它不会这样做。帮助？

演示在这里：http: //jsfiddle.net/dX28k/

Answer 1

快速简便的解决方案

确保在 HTML 的双引号中使用单引号。

onclick="document.getElementById('p1').style.visibility='visible'"

适当的解决方案

• 确保始终将 Javascript、HTML、CSS 分开，而不是将它们聚集在一起。
• 例如，onclick 事件应该在不向按钮标签插入 onclick 属性的情况下完成。
• 使用严格相等来避免不匹配的类型 (===)。

http://jsfiddle.net/8dQNP/2/