getElementById.value 取决于 3 个按钮 [关闭]

Question

我正在尝试将数据移动到我的数据库，其中之一是交付选项。除了选择交付方式之外，一切都很好。单击 3 个按钮之一即可选择它。

我遇到的问题：仅保存第一选择。这意味着，当用户多次单击（例如 2 个不同的选项）时，只有第一次单击很重要。这是我的 JavaScript 代码片段。

document.addEventListener("DOMContentLoaded", function() {
  var inpostButton = document.querySelector('.inpost-button');
  inpostButton.addEventListener('click', function() {
    document.getElementById('deliveryData').value = 'Kurier InPost';
  });

  var dpdButton = document.querySelector('.dpd-button');
  dpdButton.addEventListener('click', function() {
    document.getElementById('deliveryData').value = 'Kurier DPD';
  });

  var paczkomatButton = document.querySelector('.paczkomat-button');
  paczkomatButton.addEventListener('click', function() {
    document.getElementById('deliveryData').value = 'Paczkomat InPost';
  });
});

我需要在每次点击后更新deliveryData的值。请分享您对此的想法。

Answer 1

您的代码看起来不错，问题似乎出在您的应用程序代码中的其他地方。要调试此功能，您可以编辑有问题的共享代码，如下所示（添加 console.logs）并检查其行为 - 如果它正确记录所有点击，则共享代码段不是问题

  var inpostButton = document.querySelector('.inpost-button');
  inpostButton.addEventListener('click', function() {
    document.getElementById('deliveryData').value = 'Kurier InPost';
    console.log('Selected: Kurier InPost');
  });

  var dpdButton = document.querySelector('.dpd-button');
  dpdButton.addEventListener('click', function() {
    document.getElementById('deliveryData').value = 'Kurier DPD';
    console.log('Selected: Kurier DPD');
  });

  var paczkomatButton = document.querySelector('.paczkomat-button');
  paczkomatButton.addEventListener('click', function() {
    document.getElementById('deliveryData').value = 'Paczkomat InPost';
    console.log('Selected: Paczkomat InPost');
  });
});