Динамический ввод для счетчиков чисел в Javascript

Question

Я пытаюсь создать два счетчика чисел, которые могут увеличивать и уменьшать другой счетчик в реальном времени. Также я не слишком хорошо разбираюсь в Javascript.

<input type="number" step="1" value="10" name="counter1" id="counter1"> 

<input type="number" step="1" value="10" name="counter2" id="counter2"> 

Если counter1 увеличивается, counter2 должна быть уменьшена, и наоборот; они в основном обратные друг другу. Я попытался реализовать Javascript, но это не очень хорошо, и я не уверен, как реализовать как увеличение, так и уменьшение в одно и то же время.

<script type="text/javascript"> //some non-working example code 
    function count() { 
    var counter1 = document.getElementById('counter1').value; 
    var counter2 = document.getElementById('counter2').value; 
    document.getElementById('counter2').onclick = function() { //onclick doesn't take into account if the input was increased or decreased. 
     counter2++; 
     counter1--; 
    }​ 
    document.getElementById('counter1').onclick = function() { 
     counter1++; 
     counter2--; 
    }​ 
    } 
count(); 
</script> 

Answer 1

две основные проблемы:

1. Присвоение значения входного к переменной не создает ссылку, он создает копию. Это означает, что он не будет изменять число, хранящееся на входе, а только скопированную переменную, которую вы создали.

2. Нельзя использовать событие click. Вы должны использовать change event, так как он будет срабатывать при изменении значения.

Наконец, вы можете отслеживать предыдущее значение каждого входа и сравнивать его с новым значением, чтобы определить, увеличилось или уменьшилось. Более просто, вы можете рассчитать разницу между этими значениями и вычесть это отличие от другого значения входов.

var counter1 = document.getElementById('counter1'); 
 
var counter2 = document.getElementById('counter2'); 
 
var prevCounter1 = counter1.value; 
 
var prevCounter2 = counter2.value; 
 

 
counter1.addEventListener('change', function() { 
 
    var value1 = parseInt(counter1.value); 
 
    var value2 = parseInt(counter2.value); 
 
    var delta = value1 - prevCounter1; 
 
    counter2.value = value2 - delta; 
 
    prevCounter1 = value1; 
 
}); 
 

 
counter2.addEventListener('change', function() { 
 
    var value1 = parseInt(counter1.value); 
 
    var value2 = parseInt(counter2.value); 
 
    var delta = value2 - prevCounter2; 
 
    counter1.value = value1 - delta; 
 
    prevCounter2 = value2; 
 
});

<input type="number" step="1" value="10" name="counter1" id="counter1"> 
 
<input type="number" step="1" value="10" name="counter2" id="counter2">

Answer 2

После изменения переменной, вы должны установить его в DOM, например через document.getElementById('counter1').value = counter1; Чтобы получить изменения в входах, работает click, но я предпочел бы слушать change событий.

---

UPDATE Я должен придумать немного более элегантное решение. Когда одно значение должно увеличиваться, а другое уменьшено, сумма обоих значений будет одинаковой. Так что это просто легче сначала суммировать значения, а затем вычислить второе значение вычитания первого значения (меняется) от суммы:

var input1 = document.getElementById('counter1'); 
 
var input2 = document.getElementById('counter2'); 
 
var sum = parseInt(input2.value) + parseInt(input1.value); 
 

 
function onChange(e) { 
 
    if (this===input1) 
 
     input2.value = sum - parseInt(input1.value); 
 
    else 
 
     input1.value = sum - parseInt(input2.value);  
 
} 
 

 
input1.onchange = onChange; 
 
input2.onchange = onChange;

<input type="number" step="1" value="10" name="counter1" id="counter1"> 
 
<input type="number" step="1" value="10" name="counter2" id="counter2">

---

Вы можете попробовать что-то вроде этого :

var input1 = document.getElementById('counter1'); 
 
var input2 = document.getElementById('counter2'); 
 
var lastCounter1 = parseInt(input1.value); 
 
var lastCounter2 = parseInt(input2.value); 
 

 
input2.onclick = function() { 
 
     var counter2 = parseInt(input2.value); 
 
     var counter1 = parseInt(input1.value); 
 
     counter1 += (lastCounter2 - counter2); 
 
     input1.value = counter1; 
 
     lastCounter2 = counter2; 
 
     lastCounter1 = counter1; 
 
} 
 

 
input1.onclick = function() { 
 
     var counter1 = parseInt(input1.value); 
 
     var counter2 = parseInt(input2.value); 
 
     counter2 += (lastCounter1 - counter1); 
 
     input2.value = counter2; 
 
     lastCounter1 = counter1; 
 
     lastCounter2 = counter2; 
 
}

<input type="number" step="1" value="10" name="counter1" id="counter1"> 
 
<input type="number" step="1" value="10" name="counter2" id="counter2">

Answer 3

Просто ..

console.log(counter1); 
10 

Что вы можете здесь понять, что вы присваиваете значение из document.getElementById('counter1').value в counter1, а не элемент.

Правильное использование

Вы должны использовать что-то вроде:

counter1 = document.getElementById('counter1'); 

И обновить его:

counter1.value++; 

Минималистский КОД:

counter1 = document.getElementById('counter1'); 
counter2 = document.getElementById('counter2'); 

counter2.onclick = function() { counter2.value++; counter1.value--; }; 
counter1.onclick = function() { counter1.value++; counter2.value--; }; 

Answer 4

Вот рабочая скрипка: при изменении одного входа он обновит другой вход.

https://jsfiddle.net/ctor9qk3/

Код:

Html:

<input type="number" step="1" value="10" name="counter1" id="counter1"> 
<input type="number" step="1" value="10" name="counter2" id="counter2"> 

Javascript:

var counter1 = document.getElementById("counter1"); 
var counter1Value = counter1.value; 
var counter2 = document.getElementById("counter2"); 
var counter2Value = counter2.value; 

counter1.addEventListener('change', function() {  
    var amountOfChange = diff(this.value,counter1Value); 
    counter1Value = this.value;  
    counter2Value = counter2.value = parseInt(counter2Value - amountOfChange); 
}, false); 

counter2.addEventListener('change', function() {  
    var amountOfChange = diff(this.value,counter2Value); 
    counter2Value = this.value; 
    counter1Value = counter1.value = parseInt(counter1Value - amountOfChange); 
}, false); 

function diff (a, b) { return a - b } 

Answer 5

Это должно работать:

var ConnectedCounter = (function ConnectedCounter(selector) { 
 
    var connectedCounter = { 
 
    element: null, 
 
    value: 0 
 
    }; 
 
    var self = { 
 
    element: null, 
 
    value: 0 
 
    }; 
 

 
    function init() { 
 
    self.element = document.querySelector(selector); 
 
    if(self.element) { 
 
     self.value = parseInt(self.element.value); 
 
     connectedCounter.element = document.querySelector(self.element.dataset.target); 
 
    } 
 
    if(connectedCounter) { 
 
     connectedCounter.value = parseInt(connectedCounter.element.value); 
 
     ['keyup', 'mouseup'].forEach(event => self.element.addEventListener(event, onUpdate)); 
 
     ['keyup', 'mouseup'].forEach(event => connectedCounter.element.addEventListener(event, onUpdate)); 
 
    } 
 
    } 
 
    
 
    function onUpdate(event) { 
 
    var target = event.target; 
 
    var currentValue = +target.value; 
 
    var connectedTarget = null; 
 
    if(target === self.element) { 
 
     target = self; 
 
     connectedTarget = connectedCounter 
 
    } 
 
    else if(target === connectedCounter.element) { 
 
     target = connectedCounter; 
 
     connectedTarget = self; 
 
    } 
 
    currentValue = isNaN(currentValue)? target.value: currentValue; 
 
    connectedTarget.element.value = connectedTarget.value += (target.value > currentValue? 1: -1)*Math.abs(currentValue - target.value); 
 
    target.value = currentValue; 
 
    } 
 

 
    init(); 
 

 
    return { 
 
    element: self, 
 
    connected: connectedCounter 
 
    } 
 
}) 
 

 
document.addEventListener('DOMContentLoaded', function(e) { var x = new ConnectedCounter('#counter1')});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body> 
 
    <input type="number" step="1" value="10" name="counter1" id="counter1" data-target="#counter2"> 
 
    <input type="number" step="1" value="10" name="counter2" id="counter2"> 
 
    
 
    <script src="script.js"></script> 
 
    </body> 
 

 
</html>