Getting an Error when Trying to Update Firebase Realtime Database-CodePudding

The code is giving me the error and is not updating the database:

Uncaught Error: update failed: values argument contains an invalid key ([object HTMLInputElement]) in path /user-Projects/[object HTMLInputElement]/-Mne7bupWgxUwAS-GtVh. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]"

const user = document.getElementById('userName');
//const uid = 0;
const project = document.getElementById('projectName');
const model = document.getElementById('modelName');
const addBtn = document.getElementById('addBtn');
const updateBtn = document.getElementById('updateBtn')

const db = firebase.database();
const rootRef = db.ref('users')
const projRef = db.ref('Projects')

addBtn.addEventListener('click', (e) => {
    e.preventDefault();
    //const autoId = rootRef.push().key
    //console.log('Add button clicked')

    //Project Entry
    var projectData = {
        owner: user,
        uid: user,
        title: project    
    };

    //Get a key for a new project
    var newProjectKey = db.ref().child('Projects').push().key;
    console.log(newProjectKey);
    var updates = {};
    updates['/Projects/'   newProjectKey] = projectData;
    updates['/user-Projects/'   user   '/'   newProjectKey] = projectData;

    db.ref().update(updates);


});

CodePudding user response：

You're using your user variable in the path, which is initialized as

const user = document.getElementById('userName');

So you're trying to put an HTML element into the path, instead of just the current value from that element, which is what I think you may be trying to do.

To use just the current value of the userName element, use:

const user = document.getElementById('userName').value;