为什么这个Javascript函数不显示alert()?[关闭]

kuuvgm7e  于 2023-03-28  发布在  Java
关注(0)|答案(3)|浏览(173)

**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
11个月前关闭。
Improve this question
我有一个函数,如果两个元素没有填写,就会显示一个警报,但是警报没有显示,它只是重新加载页面。不知道我错过了什么或者哪里出错了。下面是JavaScript:

function submitNewsletter() {
    var name = document.getElementById("name");
    var email = document.getElementById("email");
    if (name == "" || email == "") {
        alert("Please fill in your details.");
        return false;
    }
}

下面是它的HTML:

<section class="signup">
        <h1>Keep up to date.</h1>
        <p>Sign up to our newsletter to hear about improvements and additions to Electric Dreams.</p>
        <form class="newsletterForm">
            <label for="name" class="label">Full Name</label>
            <input type="text" id="name" name="name" class="input" placeholder="Full Name"> <br>
            <label for="email" class="label">Email Address</label>
            <input type="email" id="email" name="email" class="inout" placeholder="Email Address"> <br>
            <button type="submit" class="btn" onclick="submitNewsletter()">Submit</button>
        </form>
    </section>
5jvtdoz2

5jvtdoz21#

有几个原因可以解释为什么这段代码不起作用。
1.您尚未在窗体上设置事件侦听器
1.您正在检查变量nameemail是否为空字符串,而不是检查name.valueemail.value是否为空字符串。nameemail是HTML元素,要检查它们的值,必须选中.value
1.您没有检查每个的.value是否为null
1.必须在表单的提交回调函数中调用event.preventDefault(),否则表单的提交将导致页面重新加载。
下面是修改后的代码:

function submitNewsletter(event) {
    event.preventDefault();
    var name = document.getElementById("name");
    var email = document.getElementById("email");
    if (name.value === "" || email.value === "" || !name.value || !email.value) {
        alert("Please fill in your details.");
        return false;
    }
}

document.querySelector(".newsletterForm")
    .addEventListener('submit', submitNewsletter);

JSF中间文件:https://jsfiddle.net/qu2pesw0/1/

bvpmtnay

bvpmtnay2#

因为你在if语句中检查了名称,并通过电子邮件发送了DOM元素是否存在。你想检查输入元素的值。

function submitNewsletter() {
    var name = document.getElementById("name");
    var email = document.getElementById("email");
    if (name.value == "" || email.value == "") {
        alert("Please fill in your details.");
        return false;
    }
}
<section class="signup">
    <h1>Keep up to date.</h1>
    <p>Sign up to our newsletter to hear about improvements and additions to Electric Dreams.</p>
    <form class="newsletterForm">
        <label for="name" class="label">Full Name</label>
        <input type="text" id="name" name="name" class="input" placeholder="Full Name"> <br>
        <label for="email" class="label">Email Address</label>
        <input type="email" id="email" name="email" class="inout" placeholder="Email Address"> <br>
        <button type="submit" class="btn" onclick="submitNewsletter()">Submit</button>
    </form>
</section>
nzk0hqpo

nzk0hqpo3#

我希望你一切都好。
这就是你首先应该如何获得价值输入

function submitNewsletter() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (name == "" || email == "") {
    alert("Please fill in your details.");
    return false;
}

相关问题