For循环只输入3次电子邮件地址不能正常工作

Question

我正在编写一个Javascript程序，它将要求用户输入一封电子邮件，如果电子邮件匹配，我将向该电子邮件发送一封关于如何声明其旧配置文件数据的自动电子邮件。否则，如果用户不记得或忘记他们使用的电子邮件，并且尝试了3次，则会出现一条消息说请致电。当用户输入错误的电子邮件时，问题就出现了。我用if和if else语句建立了一个for循环。当他们输入错误的电子邮件时，else if语句会在输入第一个错误的电子邮件后的输入框中显示numTries变量。输入框会变成红色，输入框也会被清除，但是控制台没有显示调试工具中的变量numTries。谢谢你的宝贵时间。下面是javascript代码

<script>
const form         = document.querySelector('#myForm');
const emailDiv     = form.querySelector('#myemailfield');
const resultDiv    = form.querySelector('[data-result]');
const correctEmail = emailDiv.dataset.email;
form.onsubmit = (e) => {
e.preventDefault();
let inputValue = emailDiv.value;
let numTries;
let totalTries = 3;
for(numTries = 0; numTries <= totalTries; numTries++){ 
if (inputValue === correctEmail) {
{!--form.submit(); // use this to submit form.--}

resultDiv.innerText = 'Matches!'
emailDiv.classList.add('match') 
document.getElementById("mySubmit").disabled = true;

} 
else if(inputValue != correctEmail) {
resultDiv.innerText = numTries;
emailDiv.classList.add('nomatch');
emailDiv.value ="";          
console.log(numTries);
}

else 
{
resultDiv.innerText = "Please call";
}
}
}
</script>
Here is the html
{exp:channel:entries channel="Talent" entry_id="{segment_3}" limit="1"}
<img id="pics" src="{headshot}">
<form id="myForm"class="mt-8">
<p>Please enter the address you used in the past to create your profile information in the past.</p>
<label for="myemailfield">Email</label>  
<input type="email" id="myemailfield" data-email="{email_addreess}"> 
<output data-result>{email_addreess}</output>
<button id ="mySubmit" type="submit">Submit</button>
</form>
{/exp:channel:entries}

Answer 1

在我看来，for循环是一个糟糕的设计模式。每次调用该函数时，它将重新初始化numTries(首先是undefined，然后由for初始化为0)，并使用相同的数据运行3次脚本。

在form.onsubmit函数之外初始化let numTries = 0;

然后，每次调用该函数时检查numTries < 3;。如果没有，则显示您想要的任何内容(例如邀请用户呼叫的消息)。

如果是，比较inputValue === correctEmail值

是真的吗?很好。

是假的吗?增加numTries并显示一条消息来通知用户(例如"错误的电子邮件，2次尝试左")。

注意，如果用户重新加载页面，numTries将重置为0。所以使用@fnostro提到的cookie或本地存储可能会更好(但用户无论如何都可以清空他的缓存)。

Answer 2

1. 如果你正在使用计数器变量，在函数之外定义它，它将在函数结束后保留它的值。看到关闭。

let attempts = 0;

2. 既然你使用<form>尝试HTMLFormElement接口。在下面的示例中，它不仅用于引用<form>，而且还用于引用其中的表单控件。

3. if else条件需要考虑失败的尝试次数:

else if (guess !== emailKey && attempts < 2) {
attempts++;
result.value = `Sorry, ${guess} didn't match, you have ${3 - attempts} attempts remaining.
`;
/* If no match AND there are zero or one attempts made. Remember we are counting from zero 
and the console only shows the value as it is within the else if block */

4. 注意，在示例中，<form>被设置为发送到实时测试服务器。如果数据发送成功，您将在<form>下方的<iframe中看到其响应。

我对OP中的一些语法不熟悉，我猜是服务器端:

{!--form.submit(); --}
...
<input type="email" id="myemailfield" data-email="{email_addreess}"> 
<output data-result>{email_addreess}</output>

{email_address}是安全的吗?

const UI = document.forms.UI;
let attempts = 0;
UI.onsubmit = (e) => {
e.preventDefault();
const IO = e.currentTarget.elements;
const email = IO.email;
const guess = email.value;
const result = IO.result;
const emailKey = email.dataset.email;
if (guess === emailKey) {
e.currentTarget.submit();
result.value = 'Matches!'
email.classList.add('match');
IO.btn.disabled = true;
} else if (guess !== emailKey && attempts < 2) {
attempts++;
console.log(attempts);
result.value = `Sorry, ${guess} didn't match, you have ${3 - attempts} attempts remaining.`;
email.value = "";
email.classList.add('nomatch');
} else {
result.value = "Please contact ";
document.links[0].style.display = 'inline-block';
IO.btn.disabled = true;
}
}

#email {
display: inline-block;
width: 20ch;
margin: 0 3px 5px 5px;
border: 0.5px inset lightgrey;
border-radius: 2px;
outline: 0;
}
.match {
box-shadow: 0 0 0 3px lime
}
.nomatch {
box-shadow: 0 0 0 3px tomato
}
#btn:disabled {
opacity: 0.3
}
.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { min-height: 100% !important; max-width: 50%; margin-left: 50%; }

<form id="UI" action='https://httpbin.org/post' method='POST' target='response' class="mt-8">
<fieldset>
<p>Please enter the address you used in the past to create your profile information.</p>
<label for="email">Email</label>
<input id="email" name='email' type="email" data-email="x@y.z"><button id='btn'>Submit</button><br>
<output id='result' data-result></output><a href="#" style='display:none'>Support</a>
</fieldset>
</form>
<iframe src='about:blank' name='response'></iframe>