Как предотвратить возврат переменной к исходному значению каждый раз, когда я использую событие onClick - PullRequest
Новая
       1

Как предотвратить возврат переменной к исходному значению каждый раз, когда я использую событие onClick

0 голосов
/ 02 ноября 2018

Привет. У меня есть следующий код HTML и javascript для банкомата. Код работает, но баланс не уменьшается (начинается с 400 $) после каждого отзыва у пользователя. Я не могу найти, в чем проблема или как обойти эту проблему. Любая помощь будет оценена. 

<!DOCTYPE html>
<html>

<head>
    <title>ATM</title>
    <style>
        #bank {
            text-align: center;
        }

        button {
            padding-left: 6px;
            padding-right: 6px;
        }
    </style>
    <script type="text/javascript" src="Q2.js">
    </script>
</head>

<body>
    <form id="bank">
        <h2> Question 2 </h2>
        <h5>ATM Machine</h5>
        <input type="text" id="cash" placeholder="Enter withdrawal amount" size="25">
        <button type="submit" onclick="validateAmount()" id="button">Submit</button>
    </form>
</body>

</html>

Вот JavaScript 

balance = 400.00;


function validateAmount() {
    a = document.getElementById("cash");
    amount = a.value;

    if (isNaN(amount)) {
        alert("Please enter a numeric value");
    } else {

            withdrawlAmount();
    }
}

function withdrawlAmount() {


    if (amount >= balance)
        alert("Insufficent Funds");
    else if (amount % 20 != 0)
        alert("Incorrect withdrawl amount");
    else if (amount < balance) {
        alert("Succeful transaction\nCurrent Balance: " + (balance - amount) + "$");
        balance -= amount;
    } else {
        return;
    }
}

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Некоторые вещи по адресу:

  1. Предотвращение действия по умолчанию. При захвате события отправки вы захотите предотвратить действие по умолчанию, используя event.preventDefault() внутри прослушивателя событий, чтобы страница не ' т редирект.

  2. Объявите ваши идентификаторы. Если вы не объявляете идентификатор, используя var, let или const, он становится глобальным идентификатором и загрязняет глобальную область. Работа с глобальными и необъявленными идентификаторами приведет к коду, который будет менее читабельным и, вероятно, приведет к путанице для вас. Я оставлю дальнейшее объяснение этому множеству других статей на эту тему.

  3. Инкапсулируйте ваш код. Ваш код может быть единственным кодом, выполняющимся на странице в этом конкретном примере, но в основном он не будет в реальной жизни. Инкапсулируйте свой код и защитите его от других сценариев, а другие сценарии - от своего сценария.

Кроме того, я бы так и поступил: 

function ATM(balance, amount) {
  this.receiver = document.createElement('template');
  this.build();
  this.balance = balance || 0;
  this.amount = amount || 0;
}
ATM.prototype = {
  build() {
    this.receiver.insertAdjacentHTML('beforeend', `
      <form id="atm-form">
        <h1>ATM</h1>
        <p><label>Balance: <input id="balance" value="0.00" readonly></label></p>
        <p><label>Amount: <input id="amount" value="0.00"></label></p>
        <p><button type="submit">Withdraw</button></p>
      </form>
    `);

    this.nodes = {
      form: this.receiver.querySelector('#atm-form'),
      balance: this.receiver.querySelector('#balance'),
      amount: this.receiver.querySelector('#amount')
    };

    this.nodes.form.addEventListener('submit', event => {
      event.preventDefault();
      const result = this.withdraw();
      this.receiver.dispatchEvent(new CustomEvent('withdraw', { detail: { result } }));
    });
    this.nodes.balance.addEventListener('change', event => {
      this.balance = this.nodes.balance.value;
    });
    this.nodes.amount.addEventListener('change', event => {
      this.amount = this.nodes.amount.value;
    });
  },
  attach(node) {
    if(!(node instanceof Node)) return false;
    node.appendChild(this.nodes.form);
    return true;
  },
  validate() {
    const result = { valid: false, error: null };
    if(isNaN(this.amount)) {
      result.error = 'Please enter a numeric value.';
    } else if(this.amount > this.balance) {
      result.error = 'Please enter a value less than the balance.';
    } else if(this.amount <= 0) {
      result.error = 'Please enter a value greater than 0.';
    } else {
      result.valid = true;
    }
    return result;
  },
  withdraw() {
    let result = { success: false, error: null, amount: this.amount, balance: this.balance };
    const { valid, error } = this.validate();
    if(valid) {
      this.balance = this.balance - this.amount;
      result.balance = this.balance;
      result.success = true;
    } else {
      result.error = error;
    }
    return result; 
  },
  addEventListener(type, callback) {
    this.receiver.addEventListener(type, callback);
  },
  removeEventListener(type, callback) {
    this.receiver.removeEventListener(type, callback);
  },
  formatCurrency(value) {
    return Number.parseFloat(value).toFixed(2);
  },
  set amount(value) {
    this.nodes.amount.value = this.formatCurrency(value);
  },
  get amount() {
    return this.formatCurrency(this.nodes.amount.value);
  },
  set balance(value) {
    this.nodes.balance.value = this.formatCurrency(value);
  },
  get balance() {
    return this.formatCurrency(this.nodes.balance.value);
  }
}

const atm = new ATM(400.00);
atm.attach(document.body);
atm.addEventListener('withdraw', ({ detail: { result } }) => {
  console.log('Withdraw event: ', result)
});
0 голосов
/ 02 ноября 2018

Ваша кнопка отправки HTML будет обновлять страницу каждый раз, когда вы нажимаете на нее, таким образом, повторно запускаете ваш javascript и сбрасываете баланс до 400. Чтобы это исправить, измените тип кнопки с «отправить» на «кнопку».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...