pug/firebase：入力からfirebaseへのユーザの追加

Question

フォームからFirebaseデータベースにいくつかのユーザを追加しようとしています。そのために私はすでにfirebase configを私のmain.pugにリンクしています。 しかし、何も動作しない、私はどこかを見てきたと私はかなり失われています。 コードが醜い場合は、お手数ですがごめんなさい。

は私Addform.pugあり：

div 
    h2 Add Form 
    form#addForm 

    div 
     label(for='username') Username 
     input(type='text' name='username' placeholder='Username')#username 

    div 
     label(for='name') Name 
     input(type='text' name='name' placeholder='Name')#name 

    div 
     label(for='description') Description 
     textarea(type='text' name='description' placeholder='Description')#description 

    div 
     label(for='email') Email 
     input(type='email' name='email' placeholder='Email')#email 

    div 
     label(for='password') Password 
     input(type='password' name='password' placeholder='Password')#password 

    div 
     input(type='submit' value="ADD" onclick='writeUserData') 
     div 
      a(href='../src/editForm.html') Modify 

そして、そこに私sxript：

：

// Variables 
let username = document.querySelector('#username').value; 
let name = document.querySelector('#name').value; 
let email = document.querySelector('#email').value; 
let password = document.querySelector('#password').value; 
let description = document.querySelector('#description').value; 
let users = document.querySelector('#users').value; 
const submit = document.querySelector('#submit'); 

// Get a reference to the database service 
const userRef = firebase.database().ref().child('Users'); 

// Add users 
const writeUserData =() => { 

    userRef.push({ 
     username, 
     name, 
     description, 
     email, 
     password 
    }); 

    console.log(username, name, description, email, password); 
} 

// Display users 
userRef.on('value', function (snap) { 
    console.log(snap.val()); 
    users.innerText = JSON.stringify(snap.val(), null, 2); 
}); 

// Delete user 
function deleteUser() { 
    userRef.key('Users').remove(); 
} 

私が、それは私に1つのエラーを投げていた値を得ることができないようです

Uncaught TypeError: Cannot read property 'value' of null 

また、私はfirebaseのハードコードされたデータを見ることも、ユーザーを削除することもできません。

Answer 1

問題はJavaScriptの選択コードです。 document.querySelector("#xyz")は、IDがxyzの要素を探しています。入力の名前を付けましたが、入力要素に対応するIDも指定する必要があります。例では、あなたはまた、name属性