Ad

Input Range Sliders Are Not Displaying Correctly

- 1 answer

Problem displaying input type range slider's value. How can I fix this?

function update_SchoolValues(val) {
  if (val == 'Middle') {
    var Length = 1;
    var Hours = 30;
    var Subject = 1000;
    document.getElementById('Length').value = Length;
    document.getElementById('Hours').value = Hours;
    document.getElementById('Subject').value = Subject;
    document.getElementById("Length").innerHTML = Length;
    document.getElementById("Hours").innerHTML = Hours;
    document.getElementById("Subject").innerHTML = Subject;
  } else if (val == 'Element') {
    var Length = 1.6;
    var Hours = 10;
    var Subject = 80000;
    document.getElementById('Length').value = Length;
    document.getElementById('Hours').value = Hours;
    document.getElementById('Subject').value = Subject;
    document.getElementById("Length").innerHTML = Length;
    document.getElementById("Hours").innerHTML = Hours;
    document.getElementById("Subject").innerHTML = Subject;
  } else if (val == 'High') {
    var Length = 0;
    var Hours = 0;
    var Subject = 0;
    document.getElementById('Length').value = Length;
    document.getElementById('Hours').value = Hours;
    document.getElementById('Subject').value = Subject;
    document.getElementById("Length").innerHTML = Length;
    document.getElementById("Hours").innerHTML = Hours;
    document.getElementById("Subject").innerHTML = Subject;
  } else if (val == 'Undefined') {
    document.getElementById('Length').value = 0;
    document.getElementById('Hours').value = 0;
    document.getElementById('Subject').value = 0;
  } else {}
}
body,
select,
checkbox {
  font: 14pt sans;
}

#label {
  font-size: 14px;
}

.slidecontainer {
  width: 70%;
}

.slider {
  -webkit-appearance: none;
  width: 70%;
  height: 11px;
  background: lightblue;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  background: #69F;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: #69F;
  cursor: pointer;
}

.page {
  width: 100vw;
  height: 90vh;
  position: fixed;
  top: 10;
  left: -100vw;
  overflow-y: auto;
  z-index: 0;
  background-color: hsl(0, 0%, 100%);
}

page {
  color: red;
}

.page:target {
  left: 0vw;
  z-index: 1;
}

table.genInfoTable {
  margin: auto;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  text-align: left;
  color: #333333;
  border: 2px solid #343434;
  border-collapse: separate;
  border-spacing: 10px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />

  <table class="genInfoTable">
    <tr>
      <th id="label">Testing</th>
      <td><input type="text" id="One1" /></td>
    </tr>
    <tr>
      <th id="label">School</th>
      <td>
        <select id="School" onChange="update_SchoolValues(this.value);">
          <option value="">Select</option>
          <option value="Middle">Middle</option>
          <option value="Element">Element</option>
          <option value="High">High</option>
          <option value="Undefined">Undefined</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="border:none">
        <div id="GeneralDiv" style="visibility:visible" style="border: 0px;">
          <table style="border:none;">
            <tr>
              <th id="label">Length</th>
              <td><input type="Range" min="0" max="15" step="0.2" value="0" id="Length" oninput="document.getElementById('Length').innerHTML = this.value;" class="slider">
                </input>
                <em id="Length" style="font-style: normal;"></em>
              </td>
            </tr>
            <tr>
              <th id="label">Hours</th>
              <td><input type="Range" min="0" max="30" step="5" value="0" id="Hours" oninput="document.getElementById('Hours').innerHTML = this.value;" class="slider">
                </input>
                <em id="Hours" style="font-style: normal;"></em>
              </td>
            </tr>
            <tr>
              <th id="label">Subject</th>
              <td><input type="Range" min="0" max="10000" step="500" value="0" id="Subject" oninput="document.getElementById('Subject').innerHTML = this.value;" class="slider">
                </input>
                <em id="Subject" style="font-style: normal;"></em>
              </td>
            </tr>
            <em id="Length" style="font-style: normal;"></em> <br>
            <em id="Hours" style="font-style: normal;"></em> <br>
            <em id="Subject" style="font-style: normal;"></em> <br>
          </table>
        </div>
      </td>
    </tr>
  </table>

</html>

Ad

Answer

You should always prevent the duplicate id's since the identifier should be unique in the same document, the main problem comes from the duplicate id's when you fix them, the code will work correctly like :

function update_SchoolValues(val) {
  if (val == 'Middle') {
    var Length = 1;
    var Hours = 30;
    var Subject = 1000;
    document.getElementById('Length').value = Length;
    document.getElementById('Hours').value = Hours;
    document.getElementById('Subject').value = Subject;
    document.getElementById("Length_val").innerHTML = Length;
    document.getElementById("Hours_val").innerHTML = Hours;
    document.getElementById("Subject_val").innerHTML = Subject;
  } else if (val == 'Element') {
    var Length = 1.6;
    var Hours = 10;
    var Subject = 80000;
    document.getElementById('Length').value = Length;
    document.getElementById('Hours').value = Hours;
    document.getElementById('Subject').value = Subject;
    document.getElementById("Length_val").innerHTML = Length;
    document.getElementById("Hours_val").innerHTML = Hours;
    document.getElementById("Subject_val").innerHTML = Subject;
  } else if (val == 'High') {
    var Length = 0;
    var Hours = 0;
    var Subject = 0;
    document.getElementById('Length').value = Length;
    document.getElementById('Hours').value = Hours;
    document.getElementById('Subject').value = Subject;
    document.getElementById("Length_val").innerHTML = Length;
    document.getElementById("Hours_val").innerHTML = Hours;
    document.getElementById("Subject_val").innerHTML = Subject;
  } else if (val == 'Undefined') {
    document.getElementById('Length').value = 0;
    document.getElementById('Hours').value = 0;
    document.getElementById('Subject').value = 0;
  } else {}
}
body,
select,
checkbox {
  font: 14pt sans;
}

#label {
  font-size: 14px;
}

.slidecontainer {
  width: 70%;
}

.slider {
  -webkit-appearance: none;
  width: 70%;
  height: 11px;
  background: lightblue;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  background: #69F;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: #69F;
  cursor: pointer;
}

.page {
  width: 100vw;
  height: 90vh;
  position: fixed;
  top: 10;
  left: -100vw;
  overflow-y: auto;
  z-index: 0;
  background-color: hsl(0, 0%, 100%);
}

page {
  color: red;
}

.page:target {
  left: 0vw;
  z-index: 1;
}

table.genInfoTable {
  margin: auto;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  text-align: left;
  color: #333333;
  border: 2px solid #343434;
  border-collapse: separate;
  border-spacing: 10px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />

  <table class="genInfoTable">
    <tr>
      <th id="label">Testing</th>
      <td><input type="text" id="One1" /></td>
    </tr>
    <tr>
      <th id="label">School</th>
      <td>
        <select id="School" onChange="update_SchoolValues(this.value);">
          <option value="">Select</option>
          <option value="Middle">Middle</option>
          <option value="Element">Element</option>
          <option value="High">High</option>
          <option value="Undefined">Undefined</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="border:none">
        <div id="GeneralDiv" style="visibility:visible" style="border: 0px;">
          <table style="border:none;">
            <tr>
              <th id="label">Length</th>
              <td><input type="Range" min="0" max="15" step="0.2" value="0" id="Length" oninput="document.getElementById('Length_val').innerHTML = this.value;" class="slider">
                <em id="Length_val" style="font-style: normal;"></em>
              </td>
            </tr>
            <tr>
              <th id="label">Hours</th>
              <td><input type="Range" min="0" max="30" step="5" value="0" id="Hours" oninput="document.getElementById('Hours_val').innerHTML = this.value;" class="slider">
                <em id="Hours_val" style="font-style: normal;"></em>
              </td>
            </tr>
            <tr>
              <th id="label">Subject</th>
              <td><input type="Range" min="0" max="10000" step="500" value="0" id="Subject" oninput="document.getElementById('Subject_val').innerHTML = this.value;" class="slider">
                <em id="Subject_val" style="font-style: normal;"></em>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>

</html>

Ad
source: stackoverflow.com
Ad