javascript - 在我的网站上创建一个可缩放的修改按钮

Question

我想为我的网站创建一个按钮，允许用户编辑网站和数据库上的信息。换句话说，我卖车，当我想更改车辆的详细信息时，我希望它更新网站上的信息，而不仅仅是数据库。

下面的函数表示单击更新按钮时发生的情况 - 我已将其范围缩小到仅汽车颜色。 content 部分表示单击修改按钮时出现的表单。 cars.colour 根据数据库表示汽车的颜色。单击更新按钮时，该值将出现在文本字段中。 #carList 显示在不同的 HTML 页面上。

目录.js:

function update(key){
  database.ref('car').once('value', function(snapshot){
    if(snapshot.exists()){
      snapshot.forEach(function(data){
        var cars = data.val();
        console.log(cars);

        if(data.key === key){
          var content = '';

          content += ' 
            <form id="car_update">
              <div class="container"> 
              <h1>Vehicle Details</h1>
              <div class="row"> 
                <input id="colour" 
                  type="colour" placeholder="Colour..." 
                  value="'**+cars.colour+**'" style="width: 150px;"/>
              </div>
              <button class="test" 
                onclick="updateCar(\''**+key+**'\')">Submit</button>'
        }

        $('#carList').append(content);
      })
    }
  }
}

Item1.html:

<label>Colour: </label></br>
<script type="text/javascript">
  document.getElementById('colour').innerHTML;
</script>

Answer 1

我不确定我是否完全理解，听起来您想要调用并更新数据库，并且您还想要显示用户正在看到的页面更新并且您已经调用了数据库。

看起来您在 html 中有一个内联 javascript 方法，它仅在浏览器呈现页面时调用:

<label>Colour: </label></br>
<script type="text/javascript">
  document.getElementById('colour').innerHTML;
</script>

如果您还想根据用户输入更新页面，我认为您需要在用户提交后刷新页面，以便使用数据库中更新的最新内容再次从服务器调用 html，或以可以从javascript更新的方式更改要设置的html，例如:

<label>Colour: </label></br>
<span id="colorLabel">

然后在 javascript 中，在 cars.colour 具有更新后的值后，具有如下内容:

  document.getElementById('colorLabel').innerHTML = cars.colour;