Блог

Главная - Вопросы по программированию - Как ограничить количество цифр от 6 до 4 в JS? (номер типа поля вменения и только для чтения)

Как ограничить количество цифр от 6 до 4 в JS? (номер типа поля вменения и только для чтения)

#javascript #html #jquery #calculator

Вопрос:

Я пытаюсь создать калькулятор калорий для своего веб-сайта. Поля дают мне результаты, подобные этому 0.000.000. Я пытаюсь решить проблему и отображаю только 4 цифры, как показано ниже, например: 0,000

Я понятия не имею, что это за функция, я фанат и не имею навыков программирования. Пожалуйста, Помогите!

https://jsfiddle.net/snake93/89wtnxj4/273/

 <!--Input Field-->
<label class="mts-label">Peso</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="3" id="weight" name"weight1" placeholder="es: 70Kg"/>

<label class="mts-label">Altezza</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="3" id="height" name"height1" placeholder="es: 170cm"/>

<label class="mts-label">Età</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="2" id="age" name"age1" placeholder="es: 25 anni"/>

<label class="mts-label">Bodyfat in %</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="2" id="bodyfat" name"bodyfat1" placeholder="es: 15%"/>

<div class="mts-label">Sesso</div>

<!--Radio Button Sex-->
  <div class="mts-radio-button">
    <input type="radio" id="sexuomo" name="radios" value="Male">
    <label class="mts-label-radio" for="sexuomo">Uomo</label>
  </div>

  <div class="mts-radio-button1">
    <input type="radio" id="sexdonna" name="radios" value="Female">
    <label class="mts-label-radio" for="sexdonna">Donna</label>
  </div>
  
  <!--Radio Activity Level-->
  <br>
 
  <label class="mts-label">Attività lavorativa</label>
  <div class="mts-radio-button">
    <input type="radio" id="leggero" name="radiosa" value="1.2" onclick="calculate()">
    <label class="mts-label-radio" for="leggero">Leggero</label>
  </div>
  
   <div class="mts-radio-button">
    <input type="radio" id="attivo" name="radiosa" value="1.375" onclick="calculate()">
    <label class="mts-label-radio" for="attivo">Attivo</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="allenato" name="radiosa" value="1.55" onclick="calculate()">
    <label class="mts-label-radio" for="allenato">Allenato</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="Mattivo" name="radiosa" value="1.75" onclick="calculate()">
    <label class="mts-label-radio" for="Mattivo">Molto Attivo</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="Eattivo" name="radiosa" value="1.9" onclick="calculate()">
    <label class="mts-label-radio" for="Eattivo">Estremamente Attivo</label>
  </div>

<!---BMR Mifflin StJeor Result Field--->
<br>
<label class="mts-label">BMR Mifflin St Jeor Formula</label><br>


<div id="bmr-sexuomo" hidden>
<label class="mts-label">Male</label><br>
<input type="text" class="mts-field" id="bmr_mifflin_man" name="bmr_mifflin_man"
placeholder="0.000,0 Kcal" min="1" readonly/>
</div>

<br>
<div id="bmr-sexdonna" hidden>
<label class="mts-label">Female</label><br>
<input  type="text" class="mts-field" id="bmr_mifflin_woman" name="bmr_mifflin_woman"
placeholder="0.000,0 Kcal" min="1" readonly/>
</div>

<!---TDEE Mifflin StJeor Result Field--->
<br>
<label class="mts-label">TDEE Mifflin St Jeor Formula</label><br>
<div id="MifflinMale" hidden> 
<label class="mts-label">Male</label><br>
<input  type="text" class="mts-field" id="tdee_mifflin_man" name="tdee_mifflin_man"
placeholder="0.000,0 Kcal Uomo" min="1" readonly/>
</div>

<br>
<div id="MifflinFemale" hidden> 
<label class="mts-label">Female</label><br>
<input  type="text" class="mts-field" id="tdee_mifflin_woman" name="tdee_mifflin_woman"
placeholder="0.000,0 Kcal donna" min="1" readonly/>
</div>

<!---BMR Katch McArdle Formula--->
<br>
<label class="mts-label">BMR Katch McArdle Formula</label>
<div id="Ktch"> 
<input  type="text" class="mts-field" id="bmr_katch" name="bmr_katch"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---TDEE Katch McArdle Formula--->
<br>
<label class="mts-label">TDEE Katch McArdle Formula</label>
<div id="Ktch"> 
<input  type="text" class="mts-field" id="tdee_katch" name="tdee_katch"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---BMR Cunningham Formula--->
<br>
<label class="mts-label">BMR Cunningham Formula</label>
<div id="Cunningham"> 
<input  type="text" class="mts-field" id="bmr_cunningham" name="bmr_cunningham"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---TDEE Cunningham Formula--->
<br>
<label class="mts-label">TDEE Cunningham Formula</label>
<div id="Cunningham"> 
<input  type="text" class="mts-field" id="tdee_cunningham" name="tdee_cunningham"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---Calc amp; Reset Button--->
<br>
<button name="calculate" onclick="calculate()">Re-Calculate</button>
<button id="reset" onclick="resetFields()">Reset</button>
 
 <!--Input Field-->
<label class="mts-label">Peso</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="3" id="weight" name"weight1" placeholder="es: 70Kg"/>

<label class="mts-label">Altezza</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="3" id="height" name"height1" placeholder="es: 170cm"/>

<label class="mts-label">Età</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="2" id="age" name"age1" placeholder="es: 25 anni"/>

<label class="mts-label">Bodyfat in %</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="2" id="bodyfat" name"bodyfat1" placeholder="es: 15%"/>

<div class="mts-label">Sesso</div>

<!--Radio Button Sex-->
  <div class="mts-radio-button">
    <input type="radio" id="sexuomo" name="radios" value="Male">
    <label class="mts-label-radio" for="sexuomo">Uomo</label>
  </div>

  <div class="mts-radio-button1">
    <input type="radio" id="sexdonna" name="radios" value="Female">
    <label class="mts-label-radio" for="sexdonna">Donna</label>
  </div>
  
  <!--Radio Activity Level-->
  <br>
 
  <label class="mts-label">Attività lavorativa</label>
  <div class="mts-radio-button">
    <input type="radio" id="leggero" name="radiosa" value="1.2" onclick="calculate()">
    <label class="mts-label-radio" for="leggero">Leggero</label>
  </div>
  
   <div class="mts-radio-button">
    <input type="radio" id="attivo" name="radiosa" value="1.375" onclick="calculate()">
    <label class="mts-label-radio" for="attivo">Attivo</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="allenato" name="radiosa" value="1.55" onclick="calculate()">
    <label class="mts-label-radio" for="allenato">Allenato</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="Mattivo" name="radiosa" value="1.75" onclick="calculate()">
    <label class="mts-label-radio" for="Mattivo">Molto Attivo</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="Eattivo" name="radiosa" value="1.9" onclick="calculate()">
    <label class="mts-label-radio" for="Eattivo">Estremamente Attivo</label>
  </div>

<!---BMR Mifflin StJeor Result Field--->
<br>
<label class="mts-label">BMR Mifflin St Jeor Formula</label><br>


<div id="bmr-sexuomo" hidden>
<label class="mts-label">Male</label><br>
<input type="text" class="mts-field" id="bmr_mifflin_man" name="bmr_mifflin_man"
placeholder="0.000,0 Kcal" min="1" readonly/>
</div>

<br>
<div id="bmr-sexdonna" hidden>
<label class="mts-label">Female</label><br>
<input  type="text" class="mts-field" id="bmr_mifflin_woman" name="bmr_mifflin_woman"
placeholder="0.000,0 Kcal" min="1" readonly/>
</div>

<!---TDEE Mifflin StJeor Result Field--->
<br>
<label class="mts-label">TDEE Mifflin St Jeor Formula</label><br>
<div id="MifflinMale" hidden> 
<label class="mts-label">Male</label><br>
<input  type="text" class="mts-field" id="tdee_mifflin_man" name="tdee_mifflin_man"
placeholder="0.000,0 Kcal Uomo" min="1" readonly/>
</div>

<br>
<div id="MifflinFemale" hidden> 
<label class="mts-label">Female</label><br>
<input  type="text" class="mts-field" id="tdee_mifflin_woman" name="tdee_mifflin_woman"
placeholder="0.000,0 Kcal donna" min="1" readonly/>
</div>

<!---BMR Katch McArdle Formula--->
<br>
<label class="mts-label">BMR Katch McArdle Formula</label>
<div id="Ktch"> 
<input  type="text" class="mts-field" id="bmr_katch" name="bmr_katch"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---TDEE Katch McArdle Formula--->
<br>
<label class="mts-label">TDEE Katch McArdle Formula</label>
<div id="Ktch"> 
<input  type="text" class="mts-field" id="tdee_katch" name="tdee_katch"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---BMR Cunningham Formula--->
<br>
<label class="mts-label">BMR Cunningham Formula</label>
<div id="Cunningham"> 
<input  type="text" class="mts-field" id="bmr_cunningham" name="bmr_cunningham"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---TDEE Cunningham Formula--->
<br>
<label class="mts-label">TDEE Cunningham Formula</label>
<div id="Cunningham"> 
<input  type="text" class="mts-field" id="tdee_cunningham" name="tdee_cunningham"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---Calc amp; Reset Button--->
<br>
<button name="calculate" onclick="calculate()">Re-Calculate</button>
<button id="reset" onclick="resetFields()">Reset</button>

Комментарии:

1. Возможно, то, что вы ищете, — это метод toFixed () ?

2. Я не думаю, что хорошо знаю, как его использовать, я кое-что читал, но как мне правильно реализовать его в своем коде?

3. Я добавил метод tofixed, однако теперь числа отображаются так: 0000.00 вместо 0,000, Все еще осталось 6 цифр, в то время как я пытаюсь получить только 4 (тысячи сотни).

4. См.Ответ Скоуа ниже. Я собирался предложить использовать комбинацию Math.round () , чтобы округлить число, чтобы избавиться от десятичных знаков, а затем применить toLocaleString('it-IT') к результату этого округленного числа, возвращая вам разделитель вашей тысячи. Но то, что он предлагает, проще.

Ответ №1:

Вам нужно сказать toLocaleString , что вы не хотите цифр:

 document.getElementById('tdee_cunningham').value = bmr_cunningham.toLocaleString('it-IT', { maximumFractionDigits: 0 }   " Kcal";

Вот док:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Комментарии:

1. Это очень аккуратно — я просто печатал длинный ответ о том, как он мог бы исправить ситуацию, но ваш ответ проще, чем мой. Это интересно знать. Не понимал, что вы можете передать объект options в toLocaleString.

2. Grazie per l’intervento. Funziona correttamente ma ho notato che mancava una parentesi di chiusura, per cui lascio qui il codice corretto per chiunque fosse interessato. document.getElementById('tdee_cunningham').value = bmr_cunningham.toLocaleString('it-IT', { maximumFractionDigits: 0 } ) " Kcal";

Метки: