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

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

0 голосов
/ 18 апреля 2020

Я хочу получить все эти входные значения для моего бюджетного приложения, но у меня есть проблема, чтобы получить значения переключателя, потому что он говорит, что он не определен. Я создаю глобальную функцию, чтобы получить значение радиокнопки. но остальные находятся в javascript модуле.

https://jsfiddle.net/8k3gw7ty/

<div class="button_income">
  <input type="radio" name="type" value="inc" id="incomebtn" onclick="getButtonValue();" checked>
  <label for="incomebtn" class="income-btn">+ Add Income</label>
</div>
<div class="button_expense">
  <input type="radio" name="type" value="exp" id="expensebtn" onclick="getButtonValue();">
  <label for="expensebtn" class="expense-btn">+ Add Expense</label>
</div>
<div class="desc_input">
  <label class="labelinput" for="input-desc">Your Income/Expense Description</label>
  <input id="input-desc" type="text" class="input_description" placeholder="Salary">
</div>
<div class="value_input">
  <label class="labelinput" for="input-val">Value of Income/Expense</label>
  <input id="input-val" type="number" class="input_value" placeholder="Rp. 100.000">
</div>

1 Ответ

0 голосов
/ 18 апреля 2020

На самом деле не было значения по умолчанию для вашей переменной val. Поскольку val будет получать значение только при нажатии на флажок (в соответствии с вашим кодом).

Также вы возвращали val, что не обязательно. Я также удалил budgetController.

Надеюсь, это поможет. 

let val = 'inc'; // default value
function getButtonValue() {
  var type = document.getElementsByName("type");
  if (type[0].checked) {
    val = type[0].value
  } else if (type[1].checked) {
    val = type[1].value
  }
}

const domController = (function() {

  return {
    getInput: function() {
      return {
        type: val,
        description: document.querySelector(".input_description").value || 0,
        value: parseFloat(document.querySelector(".input_value").value) || 0
      }


    }


  }

})();

const controller = (function( UI) {

  var ctrlAddItem = function() {
    var input = UI.getInput();
    console.log(input);

  }

  document.querySelector(".addbtn").addEventListener("click", ctrlAddItem)

  document.addEventListener("keypress", function(event) {
    if (event.keyCode === 13 || event.which === 13) {
      ctrlAddItem();
    }
  });


})( domController);
<div class="button_income">
  <input type="radio" name="type" value="inc" id="incomebtn" onclick="getButtonValue();" checked>
  <label for="incomebtn" class="income-btn">+ Add Income</label>
</div>
<div class="button_expense">
  <input type="radio" name="type" value="exp" id="expensebtn" onclick="getButtonValue();">
  <label for="expensebtn" class="expense-btn">+ Add Expense</label>
</div>
<div class="desc_input">
  <label class="labelinput" for="input-desc">Your Income/Expense Description</label>
  <input id="input-desc" type="text" class="input_description" placeholder="Salary">
</div>
<div class="value_input">
  <label class="labelinput" for="input-val">Value of Income/Expense</label>
  <input id="input-val" type="number" class="input_value" placeholder="Rp. 100.000">
</div>
<button><i class="fas fa-check addbtn">Save</i></button>
...