I am attempting to create a password validation system without the need for a database, using only a single

Question

I am attempting to create a password validation system without the need for a database, using only a single

Help Needed: Trying to Create a Password Validation Website

<script language="Javascript">
  function checkPassword(x){
    if (x == "HI"){
      alert("Just Press Ok to Continue...");
    } else {
      alert("Nope... not gonna happen");
    }
  }

  var grape = alert("Just press Ok to Countinue...")

  function redirectToWebsite() {
    if (grape === true){
      window.location="http://www.google.com";
    } else {
      alert("Nope... not gonna happen")
    }
  }

}
</script>

<center>
<br /><h3>Please Enter the Password</h3>
<br />
<b>Password:</b>
<input type="password" id="pass" value="">
<br /><br />
<button onclick="javascript:checkPassword(document.getElementById('pass').value)">Check Password</button>
<button onclick="javascript:redirectToWebsite">Proceed To my Website</button>

I would appreciate any help as I am still learning JavaScript and prefer not to use PHP. Thank you!

javascript

Answer 1

Answer №1

apple will be equal to null.

The reason for this is that alert() consistently yields null (does not have a return value).

It is advisable to utilize confirm() instead.

Answer 2

apple will be equal to null.

The reason for this is that alert() consistently yields null (does not have a return value).

It is advisable to utilize confirm() instead.

Answer 3

Answer №2

Your code faces a major issue where you have two functions attempting to achieve the same goal. The second function, alertIt, is based on a condition that will never be true.

Let's address these issues individually...

To start with, there is an extra } just before the closing </script> tag. This mistake means none of your code would run at all. Hopefully, this was just an oversight during copying and pasting.
The line:
```
var grape = alert("Just press Ok to Countinue...")
```
will always make grape equal to undefined because an alert() doesn't return any value. Consequently, the condition if (grape === true){ in your alertIt function will never evaluate to true.
Perhaps the most critical issue is that your code is overly complex for the simple task you mentioned: validating a specific password and redirecting the user to your website if correct. In reality, you only need the check function. You can eliminate the alertIt function and the button to proceed onto your website.
While not directly related to the functionality problem you faced, it’s worth noting that using inline HTML attributes like onclick, onmouseover, etc., creates global anonymous wrapper functions, leading to complicated code that hinders scaling and debugging. It is advisable to adhere to W3C DOM Event standards instead.
Lastly (though again unrelated to the main issue), styling should be handled by CSS rather than employing deprecated HTML elements like <center>.

With necessary adjustments, your working code now appears as below. Please review the comments within the code for clarifications on each step:

// After the DOM has loaded:
window.addEventListener("DOMContentLoaded", function(){

  // Obtain references to required elements
  var password = document.getElementById("pass");
  var btnPassword = document.getElementById("btnCheck");

  // Avoid linking HTML elements to JavaScript event callbacks directly in HTML
  // Instead, use .addEventListener() following W3C DOM Event standards
  btnPassword.addEventListener("click", function(){
    // Invoke the check function with the password
    check(password.value);
  });

  // Simplified function combining the previous "alertIt" and "check"
  function check(x){
    if (x == "HI"){
      // Notify the user and progress if the password is correct
      alert("Just Press Ok to Continue...");
      window.location="http://www.google.com";
    } else {
      // Inform the user otherwise
      alert("Nope... not gonna happen");
    }
  }
  
});

/* Define style rules affecting specified parts of the document */
body { text-align:center; }
#pwd { font-weight:bold; }

<!-- Notice that <center> and <b> have been transferred to the CSS
     as formatting should not belong in HTML. Additionally, <div> and <p> were added for structure while excessive <br> tags were removed. Remember not to use HTML for styling purposes.                  -->
<div>
  <h3>Enter the Password</h3>
  <br>
  <span id="pwd">Password:</span>
  <input type="password" id="pass">
</div>
<p>
  <button id="btnCheck">Check Password</button>
</p>

Answer 4

Your code faces a major issue where you have two functions attempting to achieve the same goal. The second function, alertIt, is based on a condition that will never be true.

Let's address these issues individually...

To start with, there is an extra } just before the closing </script> tag. This mistake means none of your code would run at all. Hopefully, this was just an oversight during copying and pasting.
The line:
```
var grape = alert("Just press Ok to Countinue...")
```
will always make grape equal to undefined because an alert() doesn't return any value. Consequently, the condition if (grape === true){ in your alertIt function will never evaluate to true.
Perhaps the most critical issue is that your code is overly complex for the simple task you mentioned: validating a specific password and redirecting the user to your website if correct. In reality, you only need the check function. You can eliminate the alertIt function and the button to proceed onto your website.
While not directly related to the functionality problem you faced, it’s worth noting that using inline HTML attributes like onclick, onmouseover, etc., creates global anonymous wrapper functions, leading to complicated code that hinders scaling and debugging. It is advisable to adhere to W3C DOM Event standards instead.
Lastly (though again unrelated to the main issue), styling should be handled by CSS rather than employing deprecated HTML elements like <center>.

With necessary adjustments, your working code now appears as below. Please review the comments within the code for clarifications on each step:

// After the DOM has loaded:
window.addEventListener("DOMContentLoaded", function(){

  // Obtain references to required elements
  var password = document.getElementById("pass");
  var btnPassword = document.getElementById("btnCheck");

  // Avoid linking HTML elements to JavaScript event callbacks directly in HTML
  // Instead, use .addEventListener() following W3C DOM Event standards
  btnPassword.addEventListener("click", function(){
    // Invoke the check function with the password
    check(password.value);
  });

  // Simplified function combining the previous "alertIt" and "check"
  function check(x){
    if (x == "HI"){
      // Notify the user and progress if the password is correct
      alert("Just Press Ok to Continue...");
      window.location="http://www.google.com";
    } else {
      // Inform the user otherwise
      alert("Nope... not gonna happen");
    }
  }
  
});

/* Define style rules affecting specified parts of the document */
body { text-align:center; }
#pwd { font-weight:bold; }

<!-- Notice that <center> and <b> have been transferred to the CSS
     as formatting should not belong in HTML. Additionally, <div> and <p> were added for structure while excessive <br> tags were removed. Remember not to use HTML for styling purposes.                  -->
<div>
  <h3>Enter the Password</h3>
  <br>
  <span id="pwd">Password:</span>
  <input type="password" id="pass">
</div>
<p>
  <button id="btnCheck">Check Password</button>
</p>

Answer 5

Answer №3

While this code is helpful for learning purposes, it's important to note that sensitive information like passwords can easily be viewed by anyone with access to the source code. Therefore, it's recommended to use this code solely for educational purposes. I have stripped away any additional complexity so we can focus on the main question at hand. Once you address all the issues pointed out by @ScottMarcus and other contributors, your final code should resemble something similar to this...

function check(x) {
  if (x === "HI") {
    alert('going to website')
    location.assign("#mywebsite");
  } else {
    alert("Nope... not gonna happen");
  }
}

<h3>Enter the Password</h3>
<b>Password:</b> 
<input type="password" id="pass" value="">
<button onclick="javascript:check(document.getElementById('pass').value)">Check Password</button>

Answer 6

While this code is helpful for learning purposes, it's important to note that sensitive information like passwords can easily be viewed by anyone with access to the source code. Therefore, it's recommended to use this code solely for educational purposes. I have stripped away any additional complexity so we can focus on the main question at hand. Once you address all the issues pointed out by @ScottMarcus and other contributors, your final code should resemble something similar to this...

function check(x) {
  if (x === "HI") {
    alert('going to website')
    location.assign("#mywebsite");
  } else {
    alert("Nope... not gonna happen");
  }
}

<h3>Enter the Password</h3>
<b>Password:</b> 
<input type="password" id="pass" value="">
<button onclick="javascript:check(document.getElementById('pass').value)">Check Password</button>

I am attempting to create a password validation system without the need for a database, using only a single

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript code for the submit button to proceed or halt the form submission

The React application is experiencing difficulties in receiving the response data (JSON) from the Express server, despite the fact that

What steps can be taken to resolve a Mediasoup installation error in a Node.js environment?

Enable arrow keys feature in Regular Expressions

Employing JavaScript for fading divs in and out sequentially

Error: The Gravatar service is unable to retrieve the property 'get' from an undefined source

The continual appearance of "No file found" persists when utilizing the $redirectRoute

Assistance requested in structuring JSON data

A guide on implementing multiple ternary operators in a Vue.js template

Unable to locate FFmpeg on the root server for Discord JS v13

Combining Django's CSRF token with AngularJS

Tips for working with elements in WebDriver that are created dynamically by JavaScript

Retrieving various pieces of data in Express

Obtain the initial Firebase child element without a specific key

Working with external data in D3.js involves loading and manipulating datasets efficiently

Do you have any suggestions on how to fix this npm SQLite installation issue?

"Enhancing User Interaction with jQuery Hover State Dropdown Menus

The www file is only loaded by Node Inspector when the preload setting is turned off

An elusive static image file goes unseen within the realm of node.js/express

What is the best approach to managing a standard form in React without utilizing AJAX?