Databases
StackOverflow2013
Postsdbo
POAverage Score Review System in HTML and JavaScript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAverage Score Review System in HTML and JavaScript
    primarykey
    data
    text
    <p>I am trying to make a review center using input range sliders. They range from 1 to 10 and a number is displayed on the side of each sldier, followed by /10. A JavaScript function is used to change the number on the side of the slider to the correct number. This works perfectly.</p> <p>The problems come with the average score function findaverage(). When you adjust one slider, the value displayed ([span id="averageScore"] in first [tr])ranges from the correct value to random values like 233.5, which is impossible as it is out of 10. It's even worse when a second and third slider are adjusted.</p> <p>Here is the page in action: <a href="http://magnemation.com/games/review_center_test.html" rel="nofollow">http://magnemation.com/games/review_center_test.html</a></p> <p>I would love to see some ideas about why this is, and sorry about the indenting. Cheers.</p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td&gt;Design&lt;/td&gt; &lt;td&gt; &lt;input type="range" name="Design" min="0" max="10" step="0.5" onchange="showValue1(this.value)" /&gt; &lt;br&gt; &lt;br&gt; &lt;/td&gt; &lt;td align="right" width="22px"&gt; &lt;span id="Design"&gt;0&lt;/span&gt; &lt;/td&gt; &lt;td align="left"&gt;/10&lt;/td&gt; &lt;td rowspan="3" align="center" width="300px"&gt;Total Score: &lt;br&gt;&lt;span id="averageScore" style="font-size: 60px;"&gt;0&lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;script type="text/javascript"&gt; function showValue1(newValue) { document.getElementById("Design").innerHTML = newValue; findaverage(); } &lt;/script&gt; &lt;tr&gt; &lt;td&gt;Functionality&lt;/td&gt; &lt;td&gt; &lt;input type="range" name="Functionality" min="0" max="10" step="0.5" onchange="showValue2(this.value)" /&gt; &lt;br&gt; &lt;br&gt; &lt;/td&gt; &lt;td align="right" width="22px"&gt; &lt;span id="Functionality"&gt;0&lt;/span&gt; &lt;/td&gt; &lt;td align="left"&gt;/10&lt;/td&gt; &lt;/tr&gt; &lt;script type="text/javascript"&gt; function showValue2(newValue) { document.getElementById("Functionality").innerHTML = newValue; findaverage(); } &lt;/script&gt; &lt;tr&gt; &lt;td&gt;Ease of Use&lt;/td&gt; &lt;td&gt; &lt;input type="range" name="Ease of Use" min="0" max="10" step="0.5" onchange="showValue3(this.value)" /&gt; &lt;br&gt; &lt;br&gt; &lt;/td&gt; &lt;td align="right" width="22px"&gt; &lt;span id="Ease of Use"&gt;0&lt;/span&gt; &lt;/td&gt; &lt;td align="left"&gt;/10&lt;/td&gt; &lt;/tr&gt; &lt;script type="text/javascript"&gt; function showValue3(newValue) { document.getElementById("Ease of Use").innerHTML = newValue; findaverage(); } &lt;/script&gt; &lt;script type="text/javascript"&gt; 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; } &lt;/script&gt; </code></pre> <p></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMostafa Shahverdy
    1. USuser2243248
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAverage Score Review System in HTML and JavaScript
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. CO@Scadoodles answer below will get you back on the right path, but you should probably give your inputs a proper ID attribute if you want to retrieve them using getElementById
      singulars
      1. POAverage Score Review System in HTML and JavaScript
      1. USthefrontender
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload