Im пытается выяснить, как хранить значения слайдера JavaScript как переменные, использовать позже для d3.js.
В голове моего html-документа у меня есть 6 слайдеров, каждый из которых отображает значение 0-100. Я хочу назначить значения ползунка как переменные - одну переменную для каждого слайдера. В каждый момент времени, конечно, каждый слайдер будет иметь только одно значение. Но идея состоит в том, что я могу изменить положение ползунка, чтобы изменить значение ползунка, а затем нажать кнопку обновления, а новые значения слайдера станут новыми значениями переменных.
Ive пробовал различные методы именования, но ни один из них не является правильным синтаксисом.
Я нахожусь в том, как обращаться к форме (слайдер) по id или имени или идентификатору ввода, который является html, когда я создаю переменные JavaScript для значений, выбранных с помощью ползунков.
Любые идеи о том, как я могу заставить это работать?
Я искал в Интернете и не мог найти решение о том, как это сделать, или даже шаблон, чтобы уйти. Любые предложения приветствуются. Благодарю!
Код размещен ниже (я забрал мои нерабочие попытки и заменил на жесткие кодированные значения в качестве примера того, как выглядят ползунки):
<p>
<form name = "weight1" id = "weight1" >
<text><b> weight1 </b></text> <input id="weight1" input type="range" name="weight1" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
<script type="text/javascript">
function get_nextsibling(n) {
x=n.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling; }
return x; }
function showValue(self) {
get_nextsibling(self).innerHTML=self.value; }
</script>
</form>
<form name = "weight2" id = "weight2" >
<text><b> weight2 </b></text> <input id="weight2" input type="range" name="weight2" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight3" id = "weight3" >
<text><b> weight3 </b></text> <input id="weight3" input type="range" name="weight3" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight4" id = "weight4" >
<text><b> weight4 </b></text> <input id="weight4" input type="range" name="weight4" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight5" id = "weight5" >
<text><b> weight5 </b></text> <input id="weight5" input type="range" name="weight5" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight6" id = "weight6" >
<text><b> weight6 </b></text> <input id="weight6" input type="range" name="weight6" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
</p>
<script type="text/javascript">
//put JavaScript function that makes each slider a variable, or just assign slider values directly to variables if easier...then use in body
var weightfactor1 = 0 ; //want this variable to be the form output value instead of hard coded values between 0-100 ...so weight1 slider
var weightfactor2 = 100 ; //want this variable to be weight2 slider value
var weightfactor3 = 10 ; //want this variable to be weight3 slider value
var weightfactor4 = 100 ; // " "" weight4
var weightfactor5 = 12 ; // " "" weight5
var weightfactor6 = 100 ; // " "" weight6
</script>
См.: Http://jsbin.com/ISekuSiN/5 для примера рабочих слайдеров (решение, которое было предоставлено предыдущему вопросу, который у меня был об этом, Отображение значений из нескольких значений слайдера JavaScript)
Пара предложений:
Для случая, описанного выше, вы можете использовать объект документа следующим образом:
var weightFactor1 = document.getElementById("weight1"). value;
parseInt(document.getElementById("weight1").value)