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++; 

極簡CODE：

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>