0

入力範囲スライダーを使ってレビューセンターを作ろうとしています。それらは 1 から 10 までの範囲で、数字は各 sldier の横に表示され、その後に /10 が続きます。スライダーの横の数値を正しい数値に変更するために JavaScript 関数が使用されます。これは完全に機能します。

問題は、平均スコア関数 findaverage() に付属しています。1 つのスライダーを調整すると、表示される値 (最初の [tr] の [span id="averageScore"]) は、正しい値から 233.5 のようなランダムな値までの範囲になります。 2 番目と 3 番目のスライダーが調整されます。

実際のページは次のとおりです: 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