我怎樣才能使它根據輸入產生不同的結果？

Question

我有以下代碼，我想知道而不是這樣做，以便如果輸入數組中的任何變量，它將帶您到index.php ，我想要它，所以如果輸入第一個，它將帶您到1.html ，如果輸入 2，它將帶您到2.html etc 。 這可能嗎？

HTML 代碼：

<center>
    <form
     name="myForm"
     onsubmit="return validateForm()"
     method="post"
    >
        <h1 style = "color:white;">Enter code </h1>
        <input type="text" name="value" style="padding: 5px; border-radius: 6px; border: 0px solid transparent;"/>
        <br><br>
        <input type="submit" class = "ex" value="Enter/submit" style="border-radius: 6px; font-size: 18px;display: inline-block; padding: 20px; border: none; background-color: royalblue; color: white;"/>
    </form>
</center>

JavaScript 代碼：

var cars = ["Saab", "Volvo", "BMW"];
function validateForm() {
    var x = document.forms["myForm"]["value"].value;
    if (cars.indexOf(x) == -1) {
        alert("no car entered");
        return false;
    }

    var x = document.forms["myForm"]["value"].value;
    if (cars.indexOf(x) != -1) {
        window.location.href = "index.php";
        return false;
    }
}

Answer 1

像這樣的東西？ 只需將 console.log 替換為您想要的重定向即可。

 const cars = ["Saab", "Volvo", "BMW"] function validateForm() { const inputValue = document.forms["myForm"]["value"].value; if (inputValue === cars[0]) { console.log("Redirect to 1.html"); } else if (inputValue === cars[1]) { console.log("Redirect to 2.html"); } else if (inputValue === cars[2]) { console.log("Redirect to 3.html"); } else { console.log("no car entered") } return false; }

 <form name="myForm" onsubmit="return validateForm()" method="post"> Enter code <input id="formInput" type="text" name="value" /><br> <input type="submit" class="ex" value="Enter/submit" /> </form>

Answer 2

要重定向到 1.html、2.html 等形式的 URL 等，我們注意到所需的數字是汽車的索引。 所以我們要重定向到的地方就是這個 index.html

這是實現這一點的代碼。

<center>
  <form name="myForm" onsubmit="return validateForm()" method="post">
    <h1 style = "color:black;">Enter code </h1><input type="text" name="value" style="padding: 5px; border-radius: 6px; border: 1px solid red;"/>
    <br><br><input type="submit" class = "ex" value="Enter/submit" style="border-radius: 6px; font-size: 18px;display: inline-block; padding: 20px; border: none; background-color: royalblue; color: white;"/>
  </form>
</center>
<script>
var cars = ["Saab", "Volvo", "BMW"];

function validateForm() {alert(document.forms);alert(document.forms["myForm"]["value"].value);
  var x = document.forms["myForm"]["value"].value;
  if(cars.indexOf(x) == -1){
    alert("no car entered");
    return false;
  }
  else{
    window.location.href = cars.indexOf(x) + ".html";
  }
}
</script>

筆記：

• center 已棄用 - 改用 CSS
• 問題中的代碼兩次聲明 x
• if...else 在上面使用，而不是兩次測試條件
• 由於正在重定向用戶，因此最終的 return 語句似乎沒有意義
• 輸入元素的邊框設置為 0。對於這個測試，它被設置為 1px，顏色為紅色，因此可以看到