Javascriptの数値カウンタの動的入力

Question

他のカウンタをリアルタイムでインクリメントおよびデクリメントできる2つの数値カウンタを作成しようとしています。また、私は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

2つの大きな問題：

1. 変数への入力の値を割り当てるには、それがコピーを作成し、参照を作成しません。つまり、入力に保存されている番号を変更するつもりはなく、作成したコピーされた変数だけが変更されます。

2. イベントclickを使用しないでください。 change eventを使用する必要があります。これは、値が変更されるたびに発生するためです。

最後に、各入力の以前の値を追跡し、新しい値と比較して、増加または減少したかどうかを判断できます。さらに簡単に言えば、これらの値の差を計算し、その差を他の入力値から差し引くことができます。あなたはDOMなどでそれを設定する必要が変数を変更した後

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

through 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">

---

：だから、最初は値を合計し、その後の和から最初の（変更）値をsubstractingことにより、第2の値を計算するだけで簡単にそれをです：

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 

、あなたが要素counter1にdocument.getElementById('counter1').valueの値を割り当て、およびされていないということです。

適切な使用

次のようなものを使用する必要があります

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>