Javascript Question posted in
A very good W3school tutorial can be found here.

Unable to identify value of input in JavaScript

I have watched many tutorials on how to solve this problem and even trying to log it into the console. However since I am quite new to this part of coding I feel like I have made a mistake, could someone please identify so I understand?

I tried using the <.value> but it didn’t seem to exist on VScode which was very odd.

here is my code:

const email = document.getElementById('emailId');
const password = document.getElementById('passwordId');
const repassword = document.getElementById('passwordreconfirmId'); 

let evalue = email.setAttribute(value,);
let pvalue = password.setAttribute(value,);
let rpvalue = repassword.setAttribute(value,);

function popup() {
    if (evalue, pvalue, rpvalue === 4) {
        document.getElementById('nextButton').removeAttribute('disabled', 'disabled');
    } else {
        document.getElementById('nextButton').setAttribute('disabled', 'disabled');
    }
}
<div class="Password-Text">
    <input type="password" onload="passwordvalue" class="pswd" id="passwordId">
</div>

<div class="Password-Text-Reconfirm">
    <input type="password" onload="repasswordvalue" class="re-pswd" id="passwordreconfirmId">
</div>

<div class="next_page"> 
    <button disabled="disabled" onload="popup()" type="submit" id="nextButton">
        <style>
        </style>
    </button>
</div>
Tags:

2

Answers


  1. 0

    Are you looking for something like this?

    const password = document.getElementById('passwordId');
const repassword = document.getElementById('passwordreconfirmId'); 

function handleChange() {
    if (password.value === repassword.value) {
        document.getElementById('nextButton').removeAttribute('disabled', 'disabled');
    } else {
        document.getElementById('nextButton').setAttribute('disabled', 'disabled');
    }
}
    <div class="Password-Text">
    <input type="password" oninput="handleChange()" class="pswd" id="passwordId">
</div>

<div class="Password-Text-Reconfirm">
    <input type="password" oninput="handleChange()" class="re-pswd" id="passwordreconfirmId">
</div>

<div class="next_page"> 
    <button disabled="disabled" type="submit" id="nextButton">
      Next Button
    </button>
</div>
    Login or Signup to reply.
  2. 0
    1. You need to test each value and use && (and) here evalue, pvalue, rpvalue === 4. NOTE, a field value is a string, so "4", not 4
    2. You cannot get a value using setAttribute since it returns undefined. We could use getAttribute and that would work better; You would need quotes to get the attribute: password.getAttribute('value') for example but you can just use password.value
    3. No need to remove or setAttribute for disabled, just set the atribute to the boolean result of the test. Use a ! (not) if the test gives a positive result that means enable the element
    4. There are no onload on elements. Only on frames, iframes and images

    Here is a working version

    window.addEventListener('DOMContentLoaded', () => { // when the page is loaded
  const password = document.getElementById('passwordId');
  const repassword = document.getElementById('passwordreconfirmId');

  function checkPassword() {
    let pvalue = password.value;
    let rpvalue = repassword.value;
    let passOK = (pvalue === "4" && rpvalue === "4");
    document.getElementById('nextButton').disabled = !passOK; // NOT ok will disable
  }
  password.addEventListener('input', checkPassword); // assign the function to the two fields
  repassword.addEventListener('input', checkPassword);

});
    <div class="Password-Text">
  <input type="password" class="pswd" id="passwordId">
</div>

<div class="Password-Text-Reconfirm">
  <input type="password" class="re-pswd" id="passwordreconfirmId">
</div>

<div class="next_page">
  <button disabled="disabled" type="submit" id="nextButton">Next</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search