Javascript - 如果輸入框中的值正確，則重定向
[英]Javascript - Redirect if the value in a input box is correct
問題描述
我有一個問題，我正在做一個小游戲，我做了一個關卡，你只需要更改關卡編號即可進入下一個關卡，但是當發送正確的值時，它應該重定向到下一個關卡，但是它不起作用......
function getVal() { var nmb = document.getElementById('input').value; var element = document.getElementById('input'); element.addEventListener('keyup', function(event) { if(nmb == 3) { document.location.href = "aw3za.html"; //If the value is correct it redirects to the level 3 } else { document.location.href = "2ksdkwa.html"; //If the value isn't correct it stays on the level 2 } }) }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>RodrigueSS 2 | Level 2</title> <link rel="stylesheet" href="assets/style/level_template.css"> <link rel="stylesheet" href="assets/style/level2_style.css"> <script src="https://kit.fontawesome.com/57d547920e.js" crossorigin="anonymous"></script> <script src="assets/script/level2.js"></script> <script type="text/javascript" src="assets/script/jquery-3.4.1.js"></script> </head> <body> <header> <div class="prev-page-container"> <a href="level1.html"><img class="prev-page-arrow" src="assets/img/prev-arrow.svg" alt="Back arrow"></a> </div> </header> <!--This is the interesting part---------> <div class="level-number-wrapper"></div> <div class="level-number-container"> <form method="GET" name="form1"> <input onclick="getVal()" id="input" name="numbox1" class="level-number" type="number"> </form> </div> </div> <!---------------------------------------> <footer> <div class="media-container"> <ul> <li><a class="media-link" href="https://www.instagram.com/r_dr_go/"><i class="fab fa-instagram"></i></a></li> <li><a class="media-link"href="https://twitter.com/Rodrigu40035063"><i class="fab fa-twitter"></i></a></li> <i class="fas fa-arrow-right"></i> </ul> </div> </footer> </body> </html>
6 個解決方案
解決方案1
2 2020-01-14 09:32:13
對於有這個問題的人，這是JS，我放了一個window.onload，這意味着它只在頁面完全加載時啟動：
window.onload = function() { document.getElementById('input').addEventListener('keyup', function(event) { if(document.getElementById('input').value == 3) { window.location.href = "aw3za.html" } }) }
解決方案2
1 2020-01-14 08:29:32
document.location幾乎在 JavaScript 存在的時候就被棄用了。 不要使用它 所以使用window.location
function getVal() {
var nmb = document.getElementById('input').value;
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
if(nmb == 3) {
window.location = "aw3za.html"; //If the value is correct it redirects to the level 3
}
else {
window.location = "2ksdkwa.html"; //If the value isn't correct it stays on the level 2
}
})
}
解決方案3
1 2020-01-14 08:54:01
我不明白為什么你需要在輸入框上觸發onClick函數。 該功能僅在您單擊時執行。 因此，當您單擊該值時，該值為空。 那么當您嘗試執行keyup該值將為空。 其實你可以使用document.location.href 。 問題是你的安排。 嘗試這個
var element = document.getElementById('input'); element.addEventListener('keyup', function(event) { var nmb = document.getElementById('input').value; if(nmb == 3){ console.log('in'); document.location.href = "new.html"; } })
<div class="level-number-wrapper"> <div class="level-number-container"> <form method="GET" name="form1"> <input id="input" name="numbox1" class="level-number"> </form> </div> </div>
解決方案4
1 2020-01-14 08:57:44
這里有幾件事：首先，你有一個額外的 div 關閉你的代碼的有趣部分：
<div class="level-number-wrapper"></div>
你應該抹掉它。
其次，您不需要使用函數 getVal() 添加事件偵聽器，您應該直接添加它。
最后，如果您停留在同一頁面，除非您將值更改為 3，否則您不需要 if 的 else 部分。 話雖如此，這段代碼對我有用，請查看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RodrigueSS 2 | Level 2</title>
<link rel="stylesheet" href="assets/style/level_template.css">
<link rel="stylesheet" href="assets/style/level2_style.css">
<script src="https://kit.fontawesome.com/57d547920e.js" crossorigin="anonymous"></script>
<script src="assets/script/level2.js"></script>
<script type="text/javascript" src="assets/script/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="prev-page-container">
<a href="level1.html"><img class="prev-page-arrow" src="assets/img/prev-arrow.svg" alt="Back arrow"></a>
</div>
</header>
<!--This is the interesting part--------->
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<!--------------------------------------->
<footer>
<div class="media-container">
<ul>
<li><a class="media-link" href="https://www.instagram.com/r_dr_go/"><i class="fab fa-instagram"></i></a></li>
<li><a class="media-link"href="https://twitter.com/Rodrigu40035063"><i class="fab fa-twitter"></i></a></li>
<i class="fas fa-arrow-right"></i>
</ul>
</div>
</footer>
<script>
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
document.location.href = "aw3za.html"
}
})</script>
</body>
</html>
我認為您可以同時使用位置和窗口，但窗口對於跨瀏覽器安全性更好一點，如下所述： JavaScript 中的 window.location 和 document.location 之間有什么區別？
解決方案5
1 2020-01-14 09:31:17
窗口.打開
在偵聽器中調用window.open函數已使瀏覽器打開選項卡。
這是工作代碼：
1. index.html
<!DOCTYPE html>
<html>
<body>
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<script>
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
window.open("aw3za.html")
}
})</script>
</body>
</html>
2. aw3za.html
<!DOCTYPE html>
<html>
<head>
<title> Level 2</title>
</head>
<body>
<h1>AW3ZA</h1>
</body>
</html>
解決方案6
0 2020-01-14 08:14:27
嘗試更換
document.location.href
經過
window.location
javascript值輸入框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.