Показать вычисления текстовых полей с десятичной запятой с помощью javascript [закрыто]

У меня 4 textboxes. Я хочу показать расчёт всех трех textboxesв устье textboxes.

Логика расчета будет.

предполагать

текст 1 = 1

текст 2 = 59

текст 3 = 3

Итак, в 4-м текстовом поле он покажет результат как

текст 4 = 159,30

как это сделать с помощью javascript

мой html выглядит так:

<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%;" />

javascript,jquery,

-11

Ответов: 4


1 принят

Попробуй это:

$('#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>


0
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);

0

Я не понимаю, какой тип вы должны выполнить, это похоже на базовую конкатенацию ... Если вы предоставите более подробную информацию, я могу обновить этот фрагмент. К настоящему времени это небольшая отправная точка:

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


0

Вы можете поместить этот код перед </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>
JavaScript, JQuery,
Похожие вопросы