如何在JavaScript中使用圆点?

时间:2019-04-28 19:22:29

标签: javascript html firebase

我正在使用JavaScript读取Firebase的数据并以html格式查看。我遇到的问题是我试图以点的形式读取它,但读取不正确。

我试图将其作为表格使用,但它不起作用

这是我的html代码:

<html>
<head>
    <title>Test</title>
    <style>
.dot {
  height: 25px;
  width: 25px;
  background-color: #008000;
  border-radius: 50%;
  display: inline-block;
}

.dot2 {
  height: 25px;
  width: 25px;
  background-color: #FF0000;
  border-radius: 50%;
  display: inline-block;
}

.dot3 {
  height: 25px;
  width: 25px;
  background-color: #FFFF00;
  border-radius: 50%;
  display: inline-block;
}
</style>
    </head>

<body>
<script src="https://www.gstatic.com/firebasejs/5.10.0/firebase.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="fconf.js"></script>

<div id="div" style="text-align:center">
  <h1> A</h1>

  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>

</div>
<div  style="text-align:center">

  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<script src="view.js"></script>
<script src="back.js"></script>
<button onclick="back()">back</button> <br>

</body>
</html>

这是我的JavaScript代码:

.dot2 {
  height: 25px;
  width: 25px;
  background-color: #FF0000;
  border-radius: 50%;
  display: inline-block;
}




setTimeout(function() {
        location.reload();
        }, 3000);

    var database = firebase.database().ref().child('/test/A');  

        database.once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(childSnapshot){
                var val = childSnapshot.val();
                //content +='<tr>';

                  if (val.Distancem2 > 15 &&  val.DistanceMiddle1 > 15 && val.DistanceMiddle3 > 15){

                content +='<div>';
                  content += '<span>' + class="dot2"+ '</span>';
                  content += '<span>' + class="dot2" + '</span>';
                   content += '<span>' + class="dot2" + '</span>';
                    content += '<span>' + class="dot2" + '</span>';
                   content +='</div>';
                }

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

这是向我展示的内容: Results

这是我想要显示的内容: Expected results

1 个答案:

答案 0 :(得分:0)

好像您有错字:

if if (val.Distancem2 > 15 &&  val.DistanceMiddle1 > 15 && val.DistanceMiddle3 > 15)

“如果”,只需删除一个即可。