时间戳

首页 > 解决方案 > 有没有办法让函数检查值？

javascript - 有没有办法让函数检查值？

问题描述

又是我！

我正在尝试查找输入的值并在按下按钮后检查该值是否为某个字符串。这很令人困惑，但这是我的代码：

var codeenter = document.getElementById("code")
console.log("Script")
function check() {
    var codecheck = codeenter.value;
    console.log("Started, you have clicked it.")
    if (codecheck === "109843") {
        document.getElementById("wel").innerHTML = "Hey, Sam King"
    }
}
#title {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: xx-large;
    text-align: center;
}

html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

#button {
    width: 20em;
    height: 2em;
    background-color: aliceblue;
    border: none;
}

#name {
    text-align: center;
    object-position: center;
    margin: auto 0px;
}

#code {
    text-align: center;
}

#emsub {
    background-color: aquamarine;
    border: none;
    width: 10em;
    height: 2em;
}
<!DOCTYPE html>
<title>Emergency Login</title>
<link rel="stylesheet" href="./style.css">
<body>
    <form action="./emergencysucess.html">
        <input type="text" id="code" placeholder="Emergency Code">
        <input type="text" id="name" placeholder="Your Name">
        <br>
        <button type="submit" id="emsub" onclick="check">Login</button>
    </form>
</body>
<script src="./script.js"></script>

这一切都有效，虽然我不认为onclick="check"有效，因为它甚至不运行该函数，因为正如您在代码中看到的那样，它应该记录一些东西，但它甚至没有记录，所以我有点困惑。

除此之外没有其他错误消息，“emergencysucess.html”是一个文件。

你能帮忙吗？

不要混淆，它会在 .js 文件的开头记录脚本。

谢谢！

标签： javascripthtmlcss

解决方案

您需要使用event.preventDefault()停止提交按钮的默认操作。

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

var codeenter = document.getElementById("code")
console.log("Script")
function check(event) {
  event.preventDefault();
    var codecheck = codeenter.value;
    console.log("Started, you have clicked it.")
    if (codecheck === "109843") {
        document.getElementById("wel").innerHTML = "Hey, Sam King"
    }
}
#title {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: xx-large;
    text-align: center;
}

html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

#button {
    width: 20em;
    height: 2em;
    background-color: aliceblue;
    border: none;
}

#name {
    text-align: center;
    object-position: center;
    margin: auto 0px;
}

#code {
    text-align: center;
}

#emsub {
    background-color: aquamarine;
    border: none;
    width: 10em;
    height: 2em;
}
<!DOCTYPE html>
<title>Emergency Login</title>
<link rel="stylesheet" href="./style.css">
<body>
    <form action="./emergencysucess.html">
        <input type="text" id="code" placeholder="Emergency Code">
        <input type="text" id="name" placeholder="Your Name">
        <br>
        <button type="submit" id="emsub" onclick="check(event)">Login</button>
    </form>
    <p id="wel" />
</body>
<script src="./script.js"></script>

推荐阅读