Как изменить значение тега <input>на значение по умолчанию, если пользователь вводит значение меньше указанного? - PullRequest
Новая
       0

Как изменить значение тега <input>на значение по умолчанию, если пользователь вводит значение меньше указанного?

0 голосов
/ 28 декабря 2018

В моей HTML-форме есть 3 тега ввода.Тип входного тега был установлен на число.Форма хорошо работает для вычисления суммы из 3 входных данных.
Но проблема возникает, когда пользователь вводит отрицательные значения во входные данные.Поэтому я хочу, чтобы мой код изменил значения, введенные во входном теге, на значения по умолчанию для тех, где пользователь ввел значение меньше 0. Действие должно выполняться при нажатии на ввод type="button".

Вот мой код: 

<HTML>
<head><title>Calculation</title>
</head>
<body>
<form>

   PE Ratio
    <input type="number"  id="PE" /><br>
    
  ROCE  
    <input type="number" id="ROCE" /><br>
   
  Sales Growth 
     <input type="number" id="SG" /> <br> 
    
   <input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; top: 250;"    onsubmit="return false"  onclick="amount.value = (15 -( PE.valueAsNumber/2)) + (40 - (ROCE.valueAsNumber)) + (10-(SG.valueAsNumber))">
  
   <p>Rating: <div id="div1">
   <strong><output name="amount" for="hours rate vat">0</output></strong></div>
   </p>
     </form>
</body>
</HTML>

для ввода идентификатора (PE), значение по умолчанию равно 7 для ввода идентификатора (ROCE), значение по умолчанию равно 5 для ввода идентификатора (SG), значение по умолчанию равно 4

Я не уверен, как мне это сделать.

Ответы [ 3 ]

0 голосов
/ 28 декабря 2018

Это помогает отделить ваш код от разметки - я переместил логику onclick в функцию calculate, которая выполняет необходимую проверку.Я также упростил вашу математику. 

function calculate() {
  const defaults = {PE: 7, ROCE: 5, SG: 4};
  const values = {};
  Object.keys(defaults).forEach(id => {
    const el = document.getElementById(id);
    if (el.value < 0) {
      el.value = defaults[id];
    }
    values[id] = el.value;
  });
  document.getElementsByName('amount')[0].value = 65 - values.PE/2 - values.ROCE - values.SG
}
<HTML>
<head><title>Calculation</title>
</head>
<body>
<form>
  PE Ratio
    <input type="number" min="0" id="PE" /><br>
    
  ROCE  
    <input type="number" id="ROCE" /><br>
   
  Sales Growth 
     <input type="number" id="SG" /> <br> 
    
   <input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; top: 250;"    onsubmit="return false"  onclick="calculate()">
  
   <p>Rating: <div id="div1">
   <strong><output name="amount" for="hours rate vat">0</output></strong></div>
   </p>
     </form>
</body>
</HTML>
0 голосов
/ 28 декабря 2018

Вы не можете сделать это, когда весь ваш код брошен в форму HTML.Я удалил форму (если она вам действительно нужна, скажите мне, и я изменю код).Я также изменил код вашей формы на более простой код JavaScript.

Я сделал это так, чтобы вы могли просто скопировать и вставить код в один скрипт.

Если что-то не работает так, как вы хотитек.Дайте мне знать. 

<HTML>

<head>
  <title>Calculation</title>
</head>

<body>

  PE Ratio <input type="number" id="PE" /><br> ROCE <input type="number" id="ROCE" /><br> Sales Growth <input type="number" id="SG" /> <br>

  <button onsubmit="return false" onclick="Multiply()" style="height: 30px; width: 150px; left: 250; top: 250;" onsubmit="return false">Multiply</button>

  <p>Rating</p>
  <b id="output">0</b>
</body>
<script>
  var output = document.getElementById("output");

  function Multiply() {

    var a = isNaN(PE.valueAsNumber) ? 7 : PE.valueAsNumber;
    var b = isNaN(ROCE.valueAsNumber) ? 5 : ROCE.valueAsNumber;
    var c = isNaN(SG.valueAsNumber) ? 4 : SG.valueAsNumber;

    if (PE.valueAsNumber < 0 || SG.valueAsNumber < 0 || ROCE.valueAsNumber < 0)
      output.innerHTML = "No negetive numbers"
    else
      output.innerHTML = 15 - a / 2 + 40 - b + 10 - c;
  }
</script>

</HTML>
0 голосов
/ 28 декабря 2018

Как я это сделаю. Сначала создайте файл javascript, например abc.js, напишите в нем следующий код 

function corrector(){
var x = document.getElementById("PE").value;
var y = document.getElementById("ROCE").value;
var z = document.getElementById("SG").value;
if(x<0)
x=7;
if(y<0)
y=5;
if(z<0)
z=4;
}

Теперь включите файл js в основной html-файл. Включите оставшуюся логику втолько этот js-файл. 

 <input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; 
 top: 250;"    onsubmit="return false"  onclick="corrector()">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...