Javascript сгенерированных ползунков диапазона с кнопками - / +, не работающими должным образом - PullRequest
Новая
       5

Javascript сгенерированных ползунков диапазона с кнопками - / +, не работающими должным образом

1 голос
/ 26 мая 2020

Я использовал javascript для создания структуры div с двумя ползунками диапазона, которые отображают их значение. У каждого ползунка диапазона также есть собственная кнопка - / + для добавления и вычитания из значения диапазона. Оба значения диапазона затем умножаются и отображаются при изменении любого значения диапазона. Это идеально подходит для первого набора созданных ползунков. Во втором наборе все функции подходят для кнопок - / +. На втором наборе ползунков диапазона кнопки добавят два и вычтут два из первого набора ползунков диапазона. Если я добавлю третий сгенерированный набор ползунков диапазона, кнопки во втором наборе ползунков диапазона будут добавлять и вычитать два, а первый набор будет добавлять и вычитать 3! Я безуспешно пытался изменить способ выполнения математики с помощью кнопок. Все еще совершенно не уверен, почему это происходит.

Конечная цель здесь - суммировать все ползунки и отправлять их на python через flask, поэтому у меня есть значение скрытого диапазона, но я еще не дошел до этого .

'' '

<script> 

count = 0;

divCount = 0;

fDiv = 1;

rCount = 1;

var shingle = document.getElementById("Shingle");
shingle.addEventListener("click", function myFunction() {

//
//
// DIV CONTAINERs AND SLIDERs
// 
// 
//     

// Main Div
// [    ]    

var holderDiv = document.createElement("div")
holderDiv.type = "div";
holderDiv.style.width = "100%";
holderDiv.id = "holderDiv" + rCount;
holderDiv.style.cssFloat = "left"; 
form1.appendChild(holderDiv);

// Inner Holder Div 1
// [ { },  ]  


var innerHolderDiv = document.createElement("div")
innerHolderDiv.type = "div";
innerHolderDiv.style.width = "30%";
innerHolderDiv.id = "innerHolderDiv" + rCount;
innerHolderDiv.style.cssFloat = "left";
holderDiv.appendChild(innerHolderDiv);

// Inner Holder Div II
// [ { }, { } ]  

var innerHolderDivII = document.createElement("div")
innerHolderDivII.type = "div";
innerHolderDivII.id = "innerHolderDiv" + rCount;
innerHolderDivII.style.cssFloat = "left";
innerHolderDivII.style.width = "30%";
holderDiv.appendChild(innerHolderDivII);


// Slider Container 1
// [ { (  ) }, { } ]  

var dv = document.createElement("div");
dv.class = "slidercontrainer";    
dv.style.fontSize = "75px";
dv.id = "shingleSliderDiv" + ++divCount;
++count;
dv.innerHTML = count; 

innerHolderDiv.appendChild(dv); 

// Slider
// [ { ( #myRange1 ) }, { } ]

var range = document.createElement("input");
range.type = "range";
range.min = "1";
range.max = "100";
range.step ="1";
range.value = "0";
range.className = "slider";
range.id = "myRange" + rCount;
range.style.width = "100%";  
range.style.height = "100%";
range.style.background = "#d3d3d3";
range.style.outline = "none";
range.style.opacity = "1";
++rCount;
innerHolderDiv.appendChild(range);

// Slider Hidden Value
// [ { ( #myRange1, myRange1HiddenValue ) }, { } ]


var rangeHidden = document.createElement("input");  
rangeHidden.type = "number"; 
rangeHidden.name = "rangeHiddenName" + count;
rangeHidden.value = "0";
rangeHidden.id = "rangeHidden" + count;
rangeHidden.style.display = "none";
innerHolderDiv.appendChild(rangeHidden);

// plus and minus buttons
// [ { ( -, #myRange1, +, myRange1HiddenValue ) }, { } ]


var minus = document.createElement("input");
minus.type = "button";
minus.id = "minus" + count;  
minus.value = "-1";
minus.style.width = "50px";
minus.style.cssFloat = "left";
minus.style.height = "50px";
minus.style.background = "#d3d3d3";
minus.style.outline = "none"; 
minus.style.opacity = "1";


innerHolderDiv.appendChild(minus);



var plus = document.createElement("input");
plus.type = "button";
plus.id = "plus" + count;
plus.value = "1";
plus.style.width = "50px";
plus.style.cssFloat = "left";
plus.style.height = "50px";
plus.style.background = "#d3d3d3";
plus.style.outline = "none"; 
plus.style.opacity = "1";


innerHolderDiv.appendChild(plus);   






// Slider Div II
// [ { ( -, #myRange1, +, myRange1HiddenValue ) }, { ( ) } ]

var dv = document.createElement("div");
dv.class = "slidercontrainer";  
dv.value = "0";  
dv.style.fontSize = "75px";
dv.id = "shingleSliderDivII" + divCount;
dv.innerHTML = count; 

innerHolderDivII.appendChild(dv); 

// Slider II
// [ { ( -, #myRange1, +, myRange1HiddenValue ) }, { ( #myRange2 ) } ]      

var rangeII = document.createElement("input");
rangeII.type = "range";
rangeII.step = "1";
rangeII.min = "1"; 
rangeII.max = "100"; 
rangeII.value = "0";
rangeII.className = "slider";
rangeII.id = "myRangeII" + count;

innerHolderDivII.appendChild(rangeII);

// Plus and minus Slider II
// [ { ( -, #myRange1, +, myRange1HiddenValue ) }, { ( -, #myRange2, + ) } ]    

var minus2 = document.createElement("input");
minus2.type = "button";
minus2.id = "minusII" + count;
minus2.value = "-1";
minus2.style.width = "50px";
minus2.style.cssFloat = "left";
minus2.style.height = "50px";
minus2.style.background = "#d3d3d3";
minus2.style.outline = "none"; 
minus2.style.opacity = "1";

innerHolderDivII.appendChild(minus2);

var plusII = document.createElement("input");
plusII.type = "button";
plusII.id = "plusII" + count;
plusII.value = "1";
plusII.style.width = "50px";
plusII.style.cssFloat = "left";
plusII.style.height = "50px";
plusII.style.background = "#d3d3d3";
plusII.style.outline = "none"; 
plusII.style.opacity = "1";


innerHolderDivII.appendChild(plusII);

// Final # Div
// [ { ( -, #myRange1, +, myRange1HiddenValue ) }, { ( -, #myRange2, + ) }, { } ]   

var dvFinalCount = document.createElement("div");
dvFinalCount.class = "slidercontrainer";  
dvFinalCount.value = "test";  
dvFinalCount.id = "finalCount" + fDiv;
++fDiv;
dvFinalCount.style.fontSize = "75px"; 
dvFinalCount.style.cssFloat = "left";
dvFinalCount.innerHTML = fDiv; 

holderDiv.appendChild(dvFinalCount); 



var slider = document.getElementsByClassName("slidecontainer"); 

var sliderR


//
//
// SLIDERS MATH 1
//
//


// Update the current slider value (each time you drag the slider handle)

var range = document.getElementById("myRange1");
range.addEventListener("input", function() {
document.getElementById("shingleSliderDiv1").innerHTML = this.value;
document.getElementById("rangeHidden1").innerHTML = this.value;
}); 

// Minus Button

var minus = document.getElementById("minus1"); 
minus.addEventListener("click", function() { 
document.getElementById("myRange1").value--;
document.getElementById("shingleSliderDiv1").innerHTML = document.getElementById("myRange1").value;
document.getElementById("rangeHidden1").innerHTML = 
document.getElementById("shingleSliderDiv1").value;

var range1 = document.getElementById("myRange1").value;
var range2 = document.getElementById("myRangeII1").value;
var total = range1 * range2;
document.getElementById("finalCount1").innerHTML = total;

});

// Plus Button


var plus = document.getElementById("plus1");
plus.addEventListener("click", function() {  

document.getElementById("myRange1").value++;
document.getElementById("shingleSliderDiv1").innerHTML = document.getElementById("myRange1").value;
document.getElementById("rangeHidden1").innerHTML = 
document.getElementById("shingleSliderDiv1").value;

var range1 = document.getElementById("myRange1").value;
var range2 = document.getElementById("myRangeII1").value;
var total = range1 * range2;  
document.getElementById("finalCount1").innerHTML = total; 

}); 

// Update the current slider value (each time you drag the slider II handle)

var rangeII = document.getElementById("myRangeII1");
rangeII.addEventListener("input", function() {
document.getElementById("shingleSliderDivII1").innerHTML = this.value;
}); 

// Plus2 Button

var plusII = document.getElementById("plusII1");
plusII.addEventListener("click", function() {
document.getElementById("myRangeII1").value++;  
document.getElementById("shingleSliderDivII1").innerHTML = 
document.getElementById("myRangeII1").value;
var range1 = document.getElementById("myRange1").value;
var range2 = document.getElementById("myRangeII1").value;
var total = range1 * range2;
document.getElementById("finalCount1").innerHTML = total;

});

// Minus2 Button

var minusII = document.getElementById("minusII1");
minusII.addEventListener("click", function() {
document.getElementById("myRangeII1").value--;
document.getElementById("shingleSliderDivII1").innerHTML = 
document.getElementById("myRangeII1").value;
var range1 = document.getElementById("myRange1").value;
var range2 = document.getElementById("myRangeII1").value;
var total = range1 * range2
document.getElementById("finalCount1").innerHTML = total

});

// Update Final # 1 Div on slider1 input

var range1 = document.getElementById('myRange1');
range1.addEventListener("input", function() {
document.getElementById("shingleSliderDiv1").innerHTML = this.value;
var range1 = document.getElementById("myRange1").value;
var range2 = document.getElementById("myRangeII1").value;
var total = range1 * range2;
document.getElementById("finalCount1").innerHTML = total;
});

// Update Final # 1 Div on slider2 input

var rangeII2 = document.getElementById('myRangeII1');
rangeII2.addEventListener("input", function() {
document.getElementById("shingleSliderDivII1").innerHTML = this.value;
var range1 = document.getElementById("myRange1").value;
var range2 = document.getElementById("myRangeII1").value;
var total = range1 * range2;
document.getElementById("finalCount1").innerHTML = total;
});


//
//
// SLIDERS MATH 2
//
//


// Update the current slider value (each time you drag the slider handle)

var range = document.getElementById("myRange2");
range.addEventListener("input", function() {
document.getElementById("shingleSliderDiv2").innerHTML = this.value;
document.getElementById("rangeHidden2").innerHTML = this.value;
}); 

// Minus Button II

var minus = document.getElementById("minus2"); 
minus.addEventListener("click", function() {
document.getElementById("myRange2").value--;
document.getElementById("shingleSliderDiv2").innerHTML = document.getElementById("myRange2").value;
document.getElementById("rangeHidden2").innerHTML = 
document.getElementById("shingleSliderDiv2").value;

var range1 = document.getElementById("myRange2").value;
var range2 = document.getElementById("myRangeII2").value;
var total = range1 * range2;
document.getElementById("finalCount2").innerHTML = total;

});

// Plus Button II

var plus = document.getElementById("plus2");
plus.addEventListener("click", function() {
document.getElementById("myRange2").value++; 
document.getElementById("shingleSliderDiv2").innerHTML = document.getElementById("myRange2").value;
document.getElementById("rangeHidden2").innerHTML = 
document.getElementById("shingleSliderDiv2").value;

var range1 = document.getElementById("myRange2").value;
var range2 = document.getElementById("myRangeII2").value;
var total = range1 * range2;
document.getElementById("finalCount2").innerHTML = total; 

}); 

// Update the current slider value (each time you drag the slider II handle)

var rangeII = document.getElementById("myRangeII2");
rangeII.addEventListener("input", function() {
document.getElementById("shingleSliderDivII2").innerHTML = this.value;
}); 

// PlusII Button

var plusII = document.getElementById("plusII2");
plusII.addEventListener("click", function() {
document.getElementById("myRangeII2").value++; 
document.getElementById("shingleSliderDivII2").innerHTML = 
document.getElementById("myRangeII2").value;
var range1 = document.getElementById("myRange2").value;
var range2 = document.getElementById("myRangeII2").value;
var total = range1 * range2;
document.getElementById("finalCount2").innerHTML = total;

});

// MinusII Button

var minusII = document.getElementById("minusII2");
minusII.addEventListener("click", function() {
document.getElementById("myRangeII2").value--;
document.getElementById("shingleSliderDivII2").innerHTML =  
document.getElementById("myRangeII2").value;
var range1 = document.getElementById("myRange2").value;
var range2 = document.getElementById("myRangeII2").value;
var total = range1 * range2
document.getElementById("finalCount2").innerHTML = total

});

// Update Final # 1 Div on slider1 input

var range1 = document.getElementById('myRange2');
range1.addEventListener("input", function() {
document.getElementById("shingleSliderDiv1").innerHTML = this.value;
var range1 = document.getElementById("myRange2").value;
var range2 = document.getElementById("myRangeII2").value;
var total = range1 * range2;
document.getElementById("finalCount2").innerHTML = total;
});

// Update Final # 1 Div on slider2 input

var rangeII2 = document.getElementById('myRangeII2');
rangeII2.addEventListener("input", function() {
document.getElementById("shingleSliderDiv2").innerHTML = this.value;
var range1 = document.getElementById("myRange2").value;
var range2 = document.getElementById("myRangeII2").value;
var total = range1 * range2;
document.getElementById("finalCount2").innerHTML = total;
});
});

' ''

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...