使用JavaScript根据输入字段更改href标记

Question

我想根据密码是否正确来更改中的链接。我想设置一个密码，我只知道html和最小JS。我想我已经设置好了，这样当密码是wima时，它会更改href并允许链接工作。这种情况不会发生。我能帮忙吗？

function login()
var password = getElementById("password"); {
if (password = "wima") {
getElementById("submit").href = "/pages/home.html";
} else {
getElementById("submit").href = "index.html";
}
}

<p>
Username
<input id="username" type=text placeholder="WIMA"><br> Password
<input id="password" type=password placeholder="WIMA"><br>
<a class="button" id="submit" href="#" onclick="login()">
Submit 
</a>
</p>

Answer 1

您的JavaScript存在一些问题。

<script language="JavaScript">
function login()
var password = getElementById("password"); // this gets the element, not the value of the element
{ // this curly brace is in the wrong place
if (password = "wima") { // this sets the value of the password var to "wima" 
getElementById("submit").href="/pages/home.html";
}
else {
getElementById("submit").href="index.html";
}
} 
</script>

这是您的代码，已清理。

<script language="JavaScript">
function login() {
var password = document.getElementById("password").value;
if (password == "wima") { // use == to compare value
document.getElementById("submit").href="/pages/home.html"; 
}
else {
document.getElementById("submit").href="index.html";
}
}
</script>

这里的另一个问题是，不应该更改用于执行login((函数的元素的href。

您可以将用户重定向到新页面，如下所示：

<script language="JavaScript">
function login() {
var password = document.getElementById("password").value;
if (password == "wima") { 
window.location.href="/pages/home.html";
}
else {
window.location.href="index.html";
}
}
</script>

Answer 2

如果您想根据输入类型文本更改href值，我想您做得不对。您应该对密码输入文本进行模糊/更改事件。根据用户点击href时的密码值，他应该被相应地重定向。看看这个：

function login() {
var _password = document.getElementById("password").value;
if ("wima" == _password) {
document.getElementById("submit").href = "/pages/home.html";
} else {
document.getElementById("submit").href = "index.html";
}
}

<p>
Username
<input id="username" type=text placeholder="WIMA">
<br> Password
<input id="password" type=password placeholder="WIMA" onblur="login()">
<br>
<a class="button" id="submit" href="#">
Submit 
</a>
</p>

Answer 3

这里有一个带有开关的表单验证器。

function validateForm() {
var x = document.forms["myForm"]["password"].value;
switch (x) {
case "":
alert("Name must be filled out");
return false;
break;
case "wima":
return true;
break;
default:
alert("Error: Wrong Password.");
document.location.href = "https://stackoverflow.com/search?q=notloggedin";
// Replace the link above with your error link return
return false;
}
}

<!-- Replace action link with your successful link -->
<form name="myForm" action="https://stackoverflow.com/search?q=login" onsubmit="return validateForm()" method="post">
<input type="password" name="password">
<input type="submit" value="Submit">
</form>

Answer 4

如果有人检查html/javascript，您的密码将以文本形式显示。因此，不建议使用这种安全方法。对于基本概念，根据输入更改链接是很有趣的。试试这个。

<p>
Username
<input id="username" type="text" placeholder="WIMA"><br> Password
<input id="password" type="password" placeholder="WIMA"><br>
<a class="button" id="submit" >
Submit 
</a>
</p>
<script>
var password = document.getElementById('password');
password.addEventListener('change', enableLogin);
var submit = document.getElementById('submit');
function enableLogin() {
if (password.value == "wima") { // it is an easy mistake (= or ==)
submit.href = "/pages/home.html";
} else {
submit.removeAttribute('href');
}
}
</script>

Answer 5

这里发生了一些事情：

• <input>内部的值由.value访问
• 你把{放错地方了
• getElementById不是全局方法，必须对要在其中选择的元素(在您的情况下是文档本身(调用它
• 要测试两个值是否相等，请使用js中的===

function login() {
var password = document.getElementById("password").value;
if (password === "wima") {
document.getElementById("submit").href = "/pages/home.html";
} else {
document.getElementById("submit").href = "index.html";
}
}

<p>
Username
<input id="username" type="text" placeholder="WIMA"><br> Password
<input id="password" type="password" placeholder="WIMA"><br>
<a class="button" id="submit" href="#" onclick="login()">
Submit 
</a>
</p>