如何使用全局变量，以便我可以在我的 javascript 模块上使用它

Question

i want to get all of this input values to my budget app but i have problem to get values of the radio button because it says its undefined. i create global function to get by radio button value. but the others is in javascript module.

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>

Answer 1

Actually there was no default value for your val variable. Since val will only get value when you click on the checkbox (according to your code).

Also you were returning val which isn't necessary. I've also removed the budgetController .

Hope this'll help.

 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>