Предложение
Я сделал версию вашего калькулятора, позвольте мне показать вам, как он работает, если можете.
Функция работает так же, как я ее организовалотличается, хотя.Вам не нужно использовать jQuery (так как вы не поместили тег jQuery в этот вопрос).
Давайте создадим функцию divide, которая будет возвращать массивцелочисленного результата деления и остатка евклидова деления между x и y.Для этого я буду использовать, как и вы, оператор модуля % и функцию Math.floor():
const divide = (x, y) => { return [ Math.floor(x/y), x % y ] };
Я использую сокращенное выражение функция стрелки для объявленияit.
Затем мы напишем фактическую функцию calculate(): объявим obj, объект, который будет содержать значения и xДенежный счет.На каждом шаге мы будем уменьшать значение x и добавлять новые свойства к объекту obj.
С нашей предыдущей функцией divide это довольно легко сделать, вам просто нужно написать эту строку:
[ obj['twoPounds'], x ] = divide(x, 200);
Путем деструктуризации массива, возвращенного divide(x, 200), мы присваиваем результат деления свойству twoPounds из obj и присваиваем остаток от деленияx.
Тот же результат был бы достигнут с:
let result = division(x, 200);
obj['twoPounds'] = result[0];
x = result[1]
Но вместо вызова функции дважды вы делаете только один раз, и код становится чище.
После вызова divide для каждого типа монет, x будет иметь значение 0 и obj будет заполнено количеством монет для типа монеты.
Наконец, мы можем отформатировать наш ответ с помощью литералов шаблона с обратными галочками (`) и синтаксисом ${}.Таким образом, мы можем встраивать переменные JavaScript в строку, а также переходить строки во время написания HTML-разметки в редакторе.
Например:
`You have ${obj.twoPounds} coins of £2`
То же, что и запись:
'You have' + obj.twoPounds + 'coins of £2'
Код JavaScript и предварительный просмотр
const divide = (x, y) => { return [Math.floor(x / y), x % y] };
const calculate = function() {
let obj = {};
let x = document.querySelector('#pennies').value;
[ obj['twoPounds'], x ] = divide(x, 200);
[ obj['onePound'], x ] = divide(x, 100);
[ obj['fiftyPence'], x ] = divide(x, 50);
[ obj['twentyPence'], x ] = divide(x, 20);
[ obj['tenPence'], x ] = divide(x, 10);
[ obj['fivePence'], x ] = divide(x, 5);
[ obj['twoPence'], x ] = divide(x, 2);
[ obj['onePence'], x ] = divide(x, 1);
document.querySelector('#result').innerHTML = `
<div>
<span>You have: </span>
<span><strong>${obj.twoPounds}</strong> x £2, </span>
<span><strong>${obj.onePound}</strong> x £1, </span>
<span><strong>${obj.fiftyPence}</strong> x 50p, </span>
<span><strong>${obj.twentyPence}</strong> x 20p, </span>
<span><strong>${obj.tenPence}</strong> x 10p, </span>
<span><strong>${obj.fivePence}</strong> x 5p, </span>
<span><strong>${obj.twoPence}</strong> x 2p, </span>
<span><strong>${obj.onePence}</strong> x 1p, </span>
</div>
`;
return false;
}
Предварительный просмотр:
const divide = (x, y) => { return [ Math.floor(x / y), x % y ] };
const calculate = function() {
let obj = {};
let x = document.querySelector('#pennies').value;
[ obj['twoPounds'], x ] = divide(x, 200);
[ obj['onePound'], x ] = divide(x, 100);
[ obj['fiftyPence'], x ] = divide(x, 50);
[ obj['twentyPence'], x ] = divide(x, 20);
[ obj['tenPence'], x ] = divide(x, 10);
[ obj['fivePence'], x ] = divide(x, 5);
[ obj['twoPence'], x ] = divide(x, 2);
[ obj['onePence'], x ] = divide(x, 1);
document.querySelector('#result').innerHTML = `
<div>
<span>You have: </span>
<span><strong>${obj.twoPounds}</strong> x £2, </span>
<span><strong>${obj.onePound}</strong> x £1, </span>
<span><strong>${obj.fiftyPence}</strong> x 50p, </span>
<span><strong>${obj.twentyPence}</strong> x 20p, </span>
<span><strong>${obj.tenPence}</strong> x 10p, </span>
<span><strong>${obj.fivePence}</strong> x 5p, </span>
<span><strong>${obj.twoPence}</strong> x 2p, </span>
<span><strong>${obj.onePence}</strong> x 1p, </span>
</div>
`;
return false;
}
#pennies {
width: 6em;
vertical-align: middle;
}
#submit {
width: 10em;
text-align: center;
}
.mainCalc {
text-align: center;
align-content: center;
}
.headings {
text-align: center;
color: white;
}
body {
margin-top: 200px;
background-color: lightblue;
}
#printResult {
text-align: center;
padding-top: 40px;
}
<div class="headings">
<h1>Penny Calculator</h1>
</div>
<div class="mainCalc">
<input type="number" placeholder=" Amount" value="593" step="1" min="0" id="pennies">
<button type="buttom" id="submit" onclick="calculate()">Calculate!</button>
</div>
<div id="printResult"><span id="result"></span></div>
Еще более короткая версия
Я выполнил рефакторинг своей собственной версии, сама функция - очень короткий действительно, наслаждайтесь!
Вместо того, чтобы вызывать функцию divide() несколько раз, я создал объект, содержащий name, label иvalue в копейках за каждую монету.
let coins = [
{ name: 'twoPounds', label: '£2', value: 200 },
{ name: 'onePound', label: '£1', value: 100 },
{ name: 'fiftyPence', label: '50p', value: 50 },
{ name: 'twentyPence', label: '£2', value: 20 },
{ name: 'tenPence', label: '£2', value: 10 },
{ name: 'fivePence', label: '£2', value: 5 },
{ name: 'twoPence', label: '£2', value: 2 },
{ name: 'onePence', label: '£2', value: 1 }
];
Затем в функции я использую метод .map, чтобы пройти через каждый элемент coins массив.Расчет количества монет при форматировании span s происходит в одной строке.Массив, возвращаемый .map, затем преобразуется в строку с добавлением .join в элемент #result.
document.querySelector('#result').innerHTML = `
<div>
<span>You have: </span>
${ coins.map( coin => `<span>${([x, x] = divide(x, coin.value))[0]} x ${coin.label}</span>` ).join(', ') }
</div>
`
Это строкакод, который выполняет в основном все:
${ coins.map( coin => `<span>${([x, x] = divide(x, coin.value))[0]} x ${coin.label}</span>` ).join(', ') }
Вот окончательный код (тот же результат, что и в предварительной версии):
const divide = (x, y) => { return [ Math.floor(x / y), x % y ] };
let coins = [
{ name: 'twoPounds', label: '£2', value: 200 },
{ name: 'onePound', label: '£1', value: 100 },
{ name: 'fiftyPence', label: '50p', value: 50 },
{ name: 'twentyPence', label: '£2', value: 20 },
{ name: 'tenPence', label: '£2', value: 10 },
{ name: 'fivePence', label: '£2', value: 5 },
{ name: 'twoPence', label: '£2', value: 2 },
{ name: 'onePence', label: '£2', value: 1 }
];
const calculate = function() {
let x = document.querySelector('#pennies').value;
document.querySelector('#result').innerHTML = `
<div>
<span>You have: </span>
${ coins.map( coin => `<span>${([x, x] = divide(x, coin.value))[0]} x ${coin.label}</span>` ).join(', ') }
</div>
`
return false;
}
#pennies {
width: 6em;
vertical-align: middle;
}
#submit {
width: 10em;
text-align: center;
}
.mainCalc {
text-align: center;
align-content: center;
}
.headings {
text-align: center;
color: white;
}
body {
margin-top: 200px;
background-color: lightblue;
}
#printResult {
text-align: center;
padding-top: 40px;
}
<div class="headings">
<h1>Penny Calculator</h1>
</div>
<div class="mainCalc">
<input type="number" placeholder=" Amount" value="593" step="1" min="0" id="pennies">
<button type="buttom" id="submit" onclick="calculate()">Calculate!</button>
</div>
<div id="printResult"><span id="result"></span></div>