提交表单后添加/更新实时数据库对象属性

时间:2021-03-17 00:29:54

标签: javascript firebase firebase-realtime-database

目前我有一个网络应用程序,每次我点击 seed 上的某个地方时,它都会创建这些 <body> 元素。但是我希望 seed 元素显示用户在表单中输入的内容。这样做的最佳方法是什么?

function createXY(e) {
    var x = e.clientX;
    var y = e.clientY;
    var form = document.getElementsByClassName("form")[0];
    form.classList.toggle("invisible");
    form.style.position = "absolute";
    form.style.top = `${y}px`;
    form.style.left = `${x}px`;
    console.log(`${x}, ${y}`)

    const newRef = firebase.database().ref("messages").push();
    newRef.set({
        "xPos": x,   
        "yPos": y,
        "sender": "",
        "seed": "",
    })
    const newKey = newRef.key;
    console.log(newKey)
}

firebase.database().ref("messages").on("child_added", function(snapshot) {
    const messageKey = snapshot.key;

    var seed = document.createElement("p");
      seed.innerHTML = 'seed';
      seed.style.position = 'absolute';
      seed.style.top = `${snapshot.val().yPos}px`;
      seed.style.left = `${snapshot.val().xPos}px`;
      seed.dataset.id = messageKey;
      document.body.appendChild(seed);
})

0 个答案:

没有答案