如何使用户重定向仅当您输入正确的单词<输入>

Question

我正在制作一个有3个输入的网站。每个输入，我希望用户只有在他们为所有3个输入输入正确的单词时才被重定向。如果用户提交时没有正确无误，则不执行任何操作。这与我上一篇文章类似，但它只有1个输入，这很容易。我不是这方面的大师，所以任何反馈或解决方案都会很棒。var slim = document.getElementById("slim");var shady = document.getElementById("shady");var standup = document.getElementById("standup");function tree1() {    slim.value === "slim";}function tree2() {    shady.value === "shady";}function tree3() {    standup.value === "stand up";}if (tree1() + tree2() + tree3() === true) {    window.location = "https://example.com";}<form action="/eyerepeat" method="get">    <label for="fname">First name:</label>    <input type="text" id="slim" /><br /><br />    <label for="lname">Last name:</label>    <input type="text" id="shady" /><br /><br />    <label for="action">Action:</label>    <input type="text" id="standup" /><br /><br />    <input id="submit" type="submit" value="Submit" /></form>

Answer 1

您必须在表单提交按钮上附加事件侦听器，在事件回调中直接检查值而不使用函数（在您的上下文中不需要它），请注意，在if语句中使用符号是错误的，您只使用逻辑运算符&&：+




document.getElementById('redirect_form').addEventListener('submit', function(e) {

  e.preventDefault();

  var slim = document.getElementById("slim");

  var shady = document.getElementById("shady");

  var standup = document.getElementById("standup");

  if ( standup.value === "stand up" &&

       shady.value === "shady" &&

       slim.value === "slim"

  ) {

    console.log('All equal');

  }

  else {

    console.log('Not All equal');

  }

  

  setTimeout(function(){

    window.location = "https://example.com";

  }, 1000)

})

<form id="redirect_form" action="/eyerepeat" method="get">

  <label for="fname">First name:</label>

  <input type="text" id="slim" /><br /><br />

  <label for="lname">Last name:</label>

  <input type="text" id="shady" /><br /><br />

  <label for="action">Action:</label>

  <input type="text" id="standup" /><br /><br />

  <input id="submit" type="submit" value="Submit" />

</form>

Answer 2

您的函数需要一个值：return

function tree1() {

  return slim.value === "slim";

}

function tree2() {

  return shady.value === "shady";

}

function tree3() {

  return standup.value === "stand up";

}

要确定这三者是否都是 ，请使用 ，而不是：true&&+

if (tree1() && tree2() && tree3() ) {

  window.location = "https://example.com";

}