JavaScriptを使用して10進数でテキストボックスの計算を表示

Question

私は4 textboxesです。私はtextboxesの3つ全ての計算を口の中に表示したいと思っています。textboxes。

計算のロジックは次のとおりです。

として

と仮定

テキスト1 = 1

テキスト2 = 59

テキスト3 = 3

ので、第4テキストボックスにそれが表示されます結果

テキスト4 = 159.30

<input name="txtArea1" type="text" id="Text1" style="width: 20%;" /> 
- 
<input name="txtArea2" type="text" id="Text2" style="width: 20%;" /> 
- 
<input name="txtArea3" type="text" id="Text3" style="width: 20%;" /> 
<input name="txtGuntha" type="text" id="Text4" style="width: 80%;" /> 

Answer 1

の下に、このお試しくださいとしての私のhtmlがどのようにこの使用してJavaScriptを実行する

：

$('#Text4').val(parseInt($('#Text1').val()) * 100 + parseInt($('#Text2').val()) + parseInt($('#Text3').val())/10); 

function doCalculation() { 
 
    $('#Text4').val(parseInt($('#Text1').val()) * 100 + parseInt($('#Text2').val()) + parseInt($('#Text3').val())/10); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input name="txtArea1" type="text" id="Text1" style="width: 20%;" /> 
 
- 
 
<input name="txtArea2" type="text" id="Text2" style="width: 20%;" /> 
 
- 
 
<input name="txtArea3" type="text" id="Text3" style="width: 20%;" /> 
 
<input name="txtGuntha" type="text" id="Text4" style="width: 80%;" /> 
 
<br> 
 
<button id="calculate" onclick="doCalculation();">Calculate</button>

を

Answer 2

var val_1 = document.getElementById("Text1").value; 
var val_2 = document.getElementById("Text2").value; 
var val_3 = document.getElementById("Text3").value; 

document.getElementById("Text4").value = val_1 + val_2 + "." +(Number(val_3)*10); 

Answer 3

</body>タグの前にこのコードを挿入できます。ユーザー入力が数字であるかどうかを確認することもできますが、質問には指定はありません。

<script> 
function updateText4() { 
var v1 = $('#Text1').val(), 
    v2 = $('#Text2').val(), 
    v3 = $('#Text3').val(), 
    v4 = ''; 

    if (v1.length > 0) { 
     v4 = 1*v1; 
    } 
    if (v2.length > 0) { 
     v4 = v4 + (1*v2); 
    } 

    if (v3.length > 0) { 
     if (v4.length === 0) { 
     v4 = '0'; 
     } 
     v4 = v4 + '.' + (1*v3); 
    } 

    $('#Text4').val(v4); 
} 

$(document).ready(function() { 
    $('#Text1, #Text2, #Text3').on('keydown', function(e) { 
     updateText4(); 
    }); 

}); 
</script> 

Answer 4

実行する必要がある計算の種類はわかりません。基本的な連結と思われます...詳細をご提供いただければ、このスニペットを更新できます。今では が、これは少し出発点である：

var Calculator = (function() { 
 
    function Calculator(fields, viewport) { 
 
    var self = this; 
 
    this.fields = fields; 
 
    this._state = { result: 0 }; 
 
    this.decimals = 2; 
 
    this.viewport = viewport; 
 
    
 
    this.fields 
 
     .forEach(function(field) { 
 
     field.addEventListener('change', self.onChange.bind(self, field)) 
 
     }) 
 
    ; 
 
    } 
 
    
 
    Calculator.prototype.calculate = function(values) { 
 
    // what do you need to do here? 
 
    return values.reduce(function(res, value, i) { 
 
     if(i === 2) { 
 
     res = res.concat('.'); 
 
     } 
 
     return res.concat(value); 
 
    }, ""); 
 
    }; 
 
    
 
    Calculator.prototype.onChange = function(field, event) { 
 
    
 
    this.values = Array.prototype.map.call(this.fields, function(f) { 
 
     return Number(f.value) || 0; 
 
    }); 
 
    
 
    this._state.result = this.calculate(this.values); 
 
    
 
    this.render(); 
 
    } 
 
    
 
    Calculator.prototype.render = function() { 
 
    this.viewport.value = Number(this._state.result).toFixed(this.decimals); 
 
    } 
 
    return Calculator; 
 
})(); 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
    var fields = document.querySelectorAll('.calc-field'); 
 
    var viewport = document.querySelector('#viewport'); 
 
    
 
    var calculator = new Calculator(fields, viewport); 
 
    calculator.render(); 
 
});

.calc-field { 
 
    text-align: center; 
 
} 
 
.fields { 
 
    text-align: center; 
 
} 
 
#viewport { 
 
    display: block; 
 
    width: 100%; 
 
}

<div class="fields"> 
 
    <input class="calc-field" type="number" value="0"/> 
 
    <input class="calc-field" type="number" value="0" /> 
 
    <input class="calc-field" type="number" value="0" /> 
 
</div> 
 
<hr /> 
 
<input id="viewport" type="text" value="0"/>