javascript - 如何通过使用js使a-tag消失？

我一直在寻找成千上万的教程，以使a-tag消失并重新出现在我的“登录”表单中，但没有一个对我有用。即使我复制并粘贴它也不起作用。这是我的代码

    <form>
        <input type="submit" name="btnadd" value="Login" onsubmit="hide()">
        <a style="color: red;" id="notfound">User not found!</a>
    </form>

</div>
<script>
    var hide = function() {
        var x = document.getElementById("notfound");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
</script>

请帮助我完成这项工作。

最佳答案

2个问题。


提交表单后，默认操作将重新加载当前页面，因此您需要避免这种情况。
onsubmit是表单的一部分，而不是按钮。


下面是一个工作示例。

ps。直接在元素上使用onsubmit，onclick等不是现代方法，请查看addEventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener以获取更好的DOM事件处理。

ps。如果运行该代码段，则可能会在再次单击该按钮时注意到，该链接显示在下面，这是因为锚标记是默认的内联而不是阻塞的。因此，要停止此操作，您可以将其更改为内联。

var hide = function() {
    var x = document.getElementById("notfound");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
    return false;
}

<div>Login Page.</div>

<form onsubmit="return hide();">
  <input type="submit" name="btnadd" value="Login">
  <a style="color: red;" id="notfound">User not found!</a>
</form>

关于javascript - 如何通过使用js使a-tag消失？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54191053/