Как рассчитать процент с помощью простого JavaScript кода - PullRequest
Новая
       7

Как рассчитать процент с помощью простого JavaScript кода

0 голосов
/ 12 февраля 2020

Я уже создал форму в html и связал ее со своей таблицей стилей, а также со страницей JavaScript. Моя проблема заключается в отображении результата в форме.

Может кто-нибудь взглянуть на код JavaScript и сказать, что я делаю неправильно?

Подробнее см. Фрагмент 

// Percentage Calculator
  
const myForm     = document.getElementById('my-form');
myForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ; 
 myForm.oninput = percentageCalculator;

function percentageCalculator(amount, percent) {       
    return ((percent *amount) / 100).toFixed(2)
  }
  
  myForm.result.value = percentageCalculator()
 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }
<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

Ответы [ 4 ]

1 голос
/ 12 февраля 2020

Если вы хотите мгновенно получить результат по щелчку на полях ввода, тогда сделайте addEventListerner для элементов ввода, затем получите значение внутри percentageCalculator и выполните вычисления соответственно ..

Я не модифицировал ничего из вашего HTML, а только изменил JS деталь .. 

const myForm = document.getElementById('my-form');

const percent = document.querySelector('[name="percent"]');

const amount = document.querySelector('.amount');

const result = document.querySelector('[name="result"]');

function percentageCalculator() { 
  result.value = ((percent.value * amount.value) / 100).toFixed(2)
}

myForm.addEventListener('submit', e=>e.preventDefault())
myForm.addEventListener('input', percentageCalculator)
  
// myForm.result.value = percentageCalculator()
fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }
<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

Если вы можете изменить шаблон HTML, тогда вы можете добавить атрибут name ко входу суммы, а затем вы можете получить элемент с помощью myForm.inputName ..

Альтернативное решение: https://codepen.io/Maniraj_Murugan/pen/KKpdgXo

1 голос
/ 12 февраля 2020 

// Percentage Calculator
  

const calculatedResult = document.getElementById('result');

function mySubmitFunction(e) {
  e.preventDefault();
  const percent = document.getElementById('percent').value;
  const amount = document.getElementById('amount').value;
  calculatedResult.value = percentageCalculator(amount,percent);
  return false;
}

function percentageCalculator(amount,percent) {       
  return ((percent *amount) / 100).toFixed(2)
}
 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }
<h2>Percentage Calculator</h2>

<form action="" onsubmit="return mySubmitFunction(event)" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" id="percent" name="percent" step=any min=0> % of </append>
    <label><input type="number" id="amount" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output id="result" name="result" value='0'></output>

    <br><br>
    <button type="submit">Calculate!</button>
  </fieldset>
</form>

Ваша ошибка:

  • Кнопка отправки вместо сброса
  • Запрет по умолчанию после отправки
  • элемент ссылки с использованием идентификатора
1 голос
/ 12 февраля 2020

Используйте oninput, как я сделал ниже. Также дайте имя поля ввода суммы. это отсутствует в ОП. 

// Percentage Calculator
  
const myForm     = document.getElementById('my-form');

myForm.oninput = () => {
    myForm.result.value = percentageCalculator(myForm.amount.value, myForm.percent.value);
}

function percentageCalculator(amount, percent) {       
    return ((percent * amount) / 100).toFixed(2)
}
 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }
<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" name="amount" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>
0 голосов
/ 12 февраля 2020

Передайте параметры в функцию как локальную область и верните результат обратно. 

function percentageCalculator(amount,percent) {       
  return ((percent *amount) / 100).toFixed(2)
}

myForm.result.value = percentageCalculator()
...