معالجة مشكل في event في الجافاسكريبت

بتاريخ 37 دقائق مضت قال محمود سعداوي:

شكرا.

من المفارقات أني وضعت form.form  (class="form")

نفس الشيء لاتعمل

كود الجافاسكريبت

// register-username-register-email-register-password-register-btn
let form            = document.querySelector('form')
let username        = document.querySelector(".register-username");
let email           = document.querySelector(".register-email");
let password        = document.querySelector(".register-password");
let confirmPassword = document.querySelector('.register-confirm-password')
let registerBtn     = document.querySelector(".register-btn");

// registerBtn.addEventListener('click', register)
// function register(e){
//     e.preventDefault()
//     if(registerUsername.value !== "" || registerEmail.value !=="" || registerPassword.value !== ""){
//         localStorage.setItem("register-username", username.value)
//         localStorage.setItem("register-email", email.value)
//         localStorage.setItem("register-password", password.value)
//     }
//     setTimeout(()=>{
//         window.location = "./login.html"
//     }, 1000)
// }

// show input error message
// function showError(input,message) {
//     // const formControl = input
//     console.log(input,message);
//     // console.log(formControl);
// }

// event listeners
form.addEventListener('submit', function(e){
    e.preventDefault()
    // if(username.value === ""){
    //     showError(username, 'username is required')
    // } else {
    //     showSuccess(username)
    // }
    console.log(form);
})

كود html

 <div class="logInForm">
        <h2>Sign Up</h2>
        <form action="">
            <input type="text" placeholder="Username" class="register-username">
            <input type="text" placeholder="Email" class="register-email">
            <input type="text" placeholder="Password" class="register-password">
            <input type="text" placeholder="Confirm Password" class="register-confirm-password">
            <input type="button" value="Sign In" class="register-btn">
        </form>
    </div>


    <script src="../js/register.js"></script>
</body>

 

form تظه لي فارغة

المشكلة في الكود أعلاه هو جزء HTML وليس javaScript. لاحظ أنك تحاول الإستماع الى form بواسطة submit ولكن في المقابل لايوجد input من نوع submit داخل ال form المستهدف. حيث أنك تضع input من نوع button ولحل المشكلة قم بإجراء التغيير التالي 

...
<input type="submit" value="Sign In" class="register-btn">
...
	

في حال كان النموذج form ضمن HTML لديك من الشكل التالي وبدون صنف class بالاسم form:

<form>
  ...
</form>

فالاستعلام عنه يجب ألا يبدأ بنقطة كالتالي:

let form = document.querySelector('form')

وفقط في حال كان يملك الصنف form وأردت الاستعلام عنه باستخدام الصنف يجب إضافة النقطة كالتالي:

<form class="form">
  ...
</form>

let form = document.querySelector('.form')

بتاريخ 1 دقيقة مضت قال Hassan Hedr:

في حال كان النموذج form ضمن HTML لديك من الشكل التالي وبدون صنف class بالاسم form:

<form>
  ...
</form>

فالاستعلام عنه يجب ألا يبدأ بنقطة كالتالي:

let form = document.querySelector('form')

وفقط في حال كان يملك الصنف form وأردت الاستعلام عنه باستخدام الصنف يجب إضافة النقطة كالتالي:

<form class="form">
  ...
</form>

let form = document.querySelector('.form')

 

شكرا.

من المفارقات أني وضعت form.form  (class="form")

نفس الشيء لاتعمل

كود الجافاسكريبت

// register-username-register-email-register-password-register-btn
let form            = document.querySelector('form')
let username        = document.querySelector(".register-username");
let email           = document.querySelector(".register-email");
let password        = document.querySelector(".register-password");
let confirmPassword = document.querySelector('.register-confirm-password')
let registerBtn     = document.querySelector(".register-btn");

// registerBtn.addEventListener('click', register)
// function register(e){
//     e.preventDefault()
//     if(registerUsername.value !== "" || registerEmail.value !=="" || registerPassword.value !== ""){
//         localStorage.setItem("register-username", username.value)
//         localStorage.setItem("register-email", email.value)
//         localStorage.setItem("register-password", password.value)
//     }
//     setTimeout(()=>{
//         window.location = "./login.html"
//     }, 1000)
// }

// show input error message
// function showError(input,message) {
//     // const formControl = input
//     console.log(input,message);
//     // console.log(formControl);
// }

// event listeners
form.addEventListener('submit', function(e){
    e.preventDefault()
    // if(username.value === ""){
    //     showError(username, 'username is required')
    // } else {
    //     showSuccess(username)
    // }
    console.log(form);
})

كود html

 <div class="logInForm">
        <h2>Sign Up</h2>
        <form action="">
            <input type="text" placeholder="Username" class="register-username">
            <input type="text" placeholder="Email" class="register-email">
            <input type="text" placeholder="Password" class="register-password">
            <input type="text" placeholder="Confirm Password" class="register-confirm-password">
            <input type="button" value="Sign In" class="register-btn">
        </form>
    </div>


    <script src="../js/register.js"></script>
</body>

form تظه لي فارغة