javascript - 是否可以显示一个 JavaScript 变量，其值将在两个 标记之间变化？

Question

如果问题标题有点模糊，我很抱歉，我仍然是 javascript 的初学者(我愿意编辑建议!)。如果您查看上面的屏幕截图，我有 5 个输入框，其中包含值。这些值是 Google Places API 返回的评分，每次用户搜索新位置时，这些值都会发生变化。我像这样显示它们。(我将使用健身房选项作为示例)。

Gymcallback功能(计算该地区所有健身房的平均评分)

function gymCallback(results2, status2) {
        var totalRating = 0,
            ratedCount = 0; 

        results2.forEach(function( place ) {
            if (place.rating !== undefined) {
                ratedCount++; 
                totalRating += place.rating;
            }
        });


        var averageRating = results2.length == 0 ? 0 : totalRating / ratedCount; 
        var averageRatingRounded = averageRating.toFixed(1);


        var averageGymRatingTB = document.getElementById('gymAvgRating');
        averageGymRatingTB.value = averageRatingRounded;
    }

averageGymRatingTB 值将被传递到屏幕截图中的输入框中，如下所示:

<p>
Gyms: &nbsp; &nbsp; &nbsp; &nbsp; 
<input type="text" size="10" name="gymAvgRating" id="gymAvgRating" />
</p>

我的问题是，是否可以在导航栏中显示下一个“健身”的健身房评级？

导航栏中的健身列表选项

            <li data-toggle="collapse" data-target="#fitness" class="collapsed">
                <a onclick="clearMarkers();GymReport();" href="#"><i class="fa fa-heart fa-lg"></i> Fitness <span
                    class="arrow"></span></a>
            </li>

我已经考虑过使用以下方法，通过添加使用“test”作为我传递的值的 innerhtml 元素，但这不起作用，所以我不确定。

<li data-toggle="collapse" data-target="#fitness" class="collapsed">
                <a onclick="clearMarkers();GymReport();" href="#"><i class="fa fa-heart fa-lg"></i> Fitness <span
                    class="arrow"></span></a><h5 id = demo></h5>
            </li>

在我的 javascript 中我使用这个:

document.getElementById("demo").innerHTML = "test";

Answer 1

您可以简单地向导航添加一个跨度，将其存储在变量中并使用innerText更改内容。

function clearMarkers() {}

function GymReport() {}

var a = document.querySelector('li[data-target="#fitness"] > a'); //get the a in the menu
var fitnessScore = document.createElement("span"); //create a new span
a.appendChild(fitnessScore); // add the span to the a

function changeValue(v) {
  fitnessScore.innerText = Math.random();
}

<ul>
  <li data-toggle="collapse" data-target="#fitness" class="collapsed">
    <a onclick="clearMarkers();GymReport();" href="#"><i class="fa fa-heart fa-lg"></i> Fitness <span
                    class="arrow"></span></a>
  </li>
</ul>


<input type="button" onclick='changeValue()' value="Change value">