javascript - 为什么这个 Javascript 函数不显示 alert()？

标签 javascript html function onclick alert

<分区>

关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 10 个月前。

如果两个元素未填写，我有一个显示警报的功能，但警报没有显示，它只是重新加载页面。不确定我错过了什么或哪里出错了。这是 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>

最佳答案

此代码不起作用的原因有几个。

您还没有在表单上设置事件监听器
您正在检查变量 name 和 email 是否为空字符串，而不是检查 name.value 和 email.value 是空字符串。 name 和 email 是 HTML 元素，要检查它们的值，您必须检查 .value
您没有检查每个的 .value 是否为 null
您必须在表单的提交回调函数中调用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);

JSFiddle:https://jsfiddle.net/qu2pesw0/1/

关于javascript - 为什么这个 Javascript 函数不显示 alert()？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71930090/

上一篇：reactjs - antd DatePicker 或 RangePicker 如何让日历图标左对齐

下一篇：r - 计算每年销售额的 Top N 产品

相关文章：

jquery - 我无法让 jquery .width() 工作

c - 尽管已指定，但打印未显示在打印数组中

jquery - 使用 jquery 搜索具有非拉丁字符的过滤器功能

java - Spring + Thymeleaf 验证动态生成的字段

javascript - 非法使用 undefined variable 、类或 'void' 文字

javascript - 如何在 TailwindCSS 中拥有动态 'primary' 类？

c++ - rbegin 和 rend() 在这个函数中做了什么？

python - 如何在一个输入中有多个字符串打印在一行中？

javascript - 如何正确设置Interval Generator？

javascript - fullcalendar v4 modif ajax 问题 + event.setDates 语法错误