输入范围滑块显示不正确
[英]Input range sliders are not displaying correctly
问题描述
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>
1 个解决方案
解决方案1
2 已采纳 2018-08-08 09:40:47
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 : 您应该始终避免使用重复ID，因为标识符在同一文档中应该是唯一的，主要问题出在修复重复ID时，代码可以正常工作：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
PhoneGap表单从“输入范围”滑块添加2个数字 - PhoneGap Forms add 2 numbers from Input Range sliders
获取多个输入类型范围滑块的平均值 - Getting the average value of multiple input-type range sliders
简化范围滑块的JavaScript - Simplify a javascript for range sliders
多个范围滑块 - Multiple range sliders
如何在DOM中的输入范围滑块列表中循环并通过每个循环捕获值 - How to loop through a list of input range sliders in the DOM and capture values with an each loop
背景没有相对于滑块正确改变 - Background not changing correctly with respect to sliders
将Range Sliders与离线Plotly一起使用 - Using Range Sliders with offline Plotly
Javascript / jQuery范围滑块是否可访问？ - Are Javascript/ jQuery range sliders accessible?
输入类型范围样式和显示值问题 - Input type range styling and displaying value problem
在HTML输入上显示范围验证器错误消息 - Displaying range validator error message on html input
相关标签