JavaScript收支追踪器：单选按钮值无法写入对象的问题排查

开发收支追踪器时，需要将选中的单选按钮值（income/expense）用于收支计算，但尝试把该值写入userExpense对象的type属性时，始终为空。在getTransactionType函数内部用console.log能正常输出选中值，但函数返回值为空，导致type属性无法赋值。

相关代码 #

JS代码

const TransactionType = document.getElementsByName('selector');

addbtn.addEventListener('click', function() {
  if (expense.value == '' || amount.value == '' || date.value == '') {
    alert('Please fill all the fields!!!');
    return;
  } else {
    const userExpense = {
      id: generateID(),
      type: getTransactionType(), // 此处无法获取到值
      date: date.value,
      expense: expense.value,
      amount: amount.value
    };
    userInput.push(userExpense);
    localStorage.setItem('data', JSON.stringify(userInput));
    location.reload();
  }
});

function getTransactionType() {
  TransactionType.forEach(item => {
    if (item.checked) {
      return item.value;
    }
  });
}

HTML代码

<!-- 选择交易类型的单选按钮 -->
<div class="container">
  <h3>Select the type of transaction:</h3>
  <ul>
    <li>
      <input type="radio" id="type-income" name="selector" value="income">
      <label for="type-income">Income</label>
    </li>

    <li>
      <input type="radio" id="type-expense" name="selector" value="expense">
      <label for="type-expense">Expense</label>
    </li>
    <!-- <button onclick=" getTransactionType()">see value</button> -->
  </ul>
</div>

问题原因 #

getTransactionType函数里用forEach循环时，回调函数中的return只会终止当前的循环迭代，不会让外层的getTransactionType函数返回值。所以函数默认返回undefined，导致userExpense.type始终为空。

解决方案 #

提供三种可行的修改方式，任选其一即可：

方案1：改用find方法（需先将HTMLCollection转为数组）

// 先将集合转为数组
const TransactionType = Array.from(document.getElementsByName('selector'));

function getTransactionType() {
  const selectedItem = TransactionType.find(item => item.checked);
  // 有选中项则返回值，否则返回空字符串
  return selectedItem ? selectedItem.value : '';
}

方案2：用普通for循环遍历

function getTransactionType() {
  for (let i = 0; i < TransactionType.length; i++) {
    if (TransactionType[i].checked) {
      return TransactionType[i].value;
    }
  }
  return ''; // 无选中项时的默认返回值
}

方案3：直接用querySelector查找选中项（最简洁）

这种方法无需提前获取元素集合，直接定位选中的单选按钮：

function getTransactionType() {
  const selectedItem = document.querySelector('input[name="selector"]:checked');
  return selectedItem ? selectedItem.value : '';
}

额外建议 #

可以在点击事件中增加单选按钮的校验，避免用户未选择类型就提交：

addbtn.addEventListener('click', function() {
  const transactionType = getTransactionType();
  if (expense.value == '' || amount.value == '' || date.value == '' || !transactionType) {
    alert('Please fill all the fields and select transaction type!!!');
    return;
  }
  // 后续逻辑不变
});

内容的提问来源于stack exchange，提问作者Marsha