0

我正在尝试使用输入范围滑块创建一个审查中心。它们的范围从 1 到 10，每个 sldier 的侧面显示一个数字，然后是 /10。JavaScript 函数用于将滑块侧面的数字更改为正确的数字。这完美地工作。

问题来自平均分数函数 findaverage()。当您调整一个滑块时，显示的值（第一个 [tr] 中的 [span id="averageScore"]）范围从正确值到 233.5 之类的随机值，这是不可能的，因为它超出了 10。调整第二和第三个滑块。

这是实际操作中的页面：http: //magnemation.com/games/review_center_test.html

我很想看到一些关于为什么会这样的想法，并对缩进感到抱歉。干杯。

<table>
<tr>
    <td>Design</td>
    <td>
        <input type="range" name="Design" min="0" max="10" step="0.5" onchange="showValue1(this.value)" />
        <br>
        <br>
    </td>
    <td align="right" width="22px"> <span id="Design">0</span>

    </td>
    <td align="left">/10</td>
    <td rowspan="3" align="center" width="300px">Total Score:
        <br><span id="averageScore" style="font-size: 60px;">0</span>
    </td>
</tr>
<script type="text/javascript">
    function showValue1(newValue) {
        document.getElementById("Design").innerHTML = newValue;
        findaverage();
    }
</script>
<tr>
    <td>Functionality</td>
    <td>
        <input type="range" name="Functionality" min="0" max="10" step="0.5" onchange="showValue2(this.value)" />
        <br>
        <br>
    </td>
    <td align="right" width="22px"> <span id="Functionality">0</span>

    </td>
    <td align="left">/10</td>
</tr>
<script type="text/javascript">
    function showValue2(newValue) {
        document.getElementById("Functionality").innerHTML = newValue;
        findaverage();
    }
</script>
<tr>
    <td>Ease of Use</td>
    <td>
        <input type="range" name="Ease of Use" min="0" max="10" step="0.5" onchange="showValue3(this.value)" />
        <br>
        <br>
    </td>
    <td align="right" width="22px"> <span id="Ease of Use">0</span>

    </td>
    <td align="left">/10</td>
</tr>
<script type="text/javascript">
    function showValue3(newValue) {
        document.getElementById("Ease of Use").innerHTML = newValue;
        findaverage();
    }
</script>
<script type="text/javascript">
    function findaverage() {
        var total = 0;
        var average = 0;
        total += document.getElementById("Design").innerHTML;
        total += document.getElementById("Functionality").innerHTML;
        total += document.getElementById("Ease of Use").innerHTML;
        average = total / 3;
        var rounded = Math.round(average * 2) / 2;
        document.getElementById("averageScore").innerHTML = rounded;
    }
</script>

4

1 回答 1

1

您正在连接字符串而不是添加数字。使用 parseFloat() 将 innerHTML 字符串转换为可用数字。

function findaverage() {
  var total = 0;
  var average = 0;
  total += parseFloat(document.getElementById("Design").innerHTML);
  total += parseFloat(document.getElementById("Functionality").innerHTML);
  total += parseFloat(document.getElementById("Ease of Use").innerHTML);
  average = total/3;
  var rounded = Math.round(average*2)/2;
  document.getElementById("averageScore").innerHTML=rounded;
}
于 2013-04-04T05:24:37.597 回答