radio单选框选中时如何为跳转链接绑定对应固定手机号？

现有自定义单选input实现，选中选项时原本会随机抽取手机号填入WhatsApp跳转按钮的链接地址，功能运行正常。现需调整手机号分配逻辑，取消随机规则，按照选中选项匹配固定手机号，匹配规则如下：

• 选中「Select 30d」选项时，使用手机号12345
• 选中「Select 6m」选项时，使用手机号23456
• 选中「Select 1y」选项时，使用手机号34567

原有代码 #

JS部分 #

//Text result on custom selected package
  let result = document.querySelector('#result');
  document.body.addEventListener('change', function (e) {
    let target = e.target;
    let message;
    switch (target.id) {
      case '30day':
        message = 'Custom text shown on 30d selected.';
        break;
      case '6month':
        message = 'Custom text shown on 6m selected.';
        break;
      case '1year':
        message = 'Custom text shown on 1y selected.';
        break;
                     }
    result.textContent = message;
  });

  // Random WhatsApp number selected package
  const getRandomPhoneNumber = () => {
    const phoneNumbers = ["12345", "23456", "34567"]
    const randomIndex = Math.floor(Math.random() * (phoneNumbers.length))
    return phoneNumbers[randomIndex]
  }

  const link = document.querySelector('#link');
  const warning = document.querySelector('#warning');
  const url = "https://api.whatsapp.com/send";
  let changed = false;
  document.getElementById('select').addEventListener('change', function (e) {
    changed = true;
    warning.innerText = '';
    let target = e.target;
    const label = document.querySelector(`[for='${target.id}']`)
    let newUrl = url;
    newUrl += `?phone=${getRandomPhoneNumber()}`
    link.href = newUrl
  });

  link.addEventListener('click', () => {
    if (!changed) {
      warning.innerText = 'Custom text shown if package not selected'
      return;
    }
  });

HTML部分 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!--custom selected package-->
  <div class="select-package" id="select" tabindex="1" style="margin:20px;">
    <input class="selectopt" name="package" type="radio" id="" checked>
    <label for="" class="option-package">Select package </label>
<br>
    <input class="selectopt" name="package" type="radio" id="30day">
    <label for="30day" class="option-package">Select 30d</label>
<br>
    <input class="selectopt" name="package" type="radio" id="6month">
    <label for="6month" class="option-package">Select 6m</label>
<br>
    <input class="selectopt" name="package" type="radio" id="1year">
    <label for="1year" class="option-package">Select 1y</label>
  </div>
  
  <!--Text result on selected package-->
  <p id="result" class="text-red text-small" style="margin:20px;"></p>
  <p id="warning" class="text-red text-small" style="margin:20px;"></p>
  <!--submit link-->
  <a id="link" class="btn btn-lg btn-danger" style="margin:20px;">Submit Link</a>

改动点 #

• 删除原随机取号的getRandomPhoneNumber函数
• 新增单选框id和手机号的固定映射对象
• 选中选项时直接根据当前选中项的id读取对应手机号，拼接进WhatsApp跳转链接
• HTML部分无需任何调整

修改后完整JS代码 #

// 选中套餐后显示对应文本
let result = document.querySelector('#result');
document.body.addEventListener('change', function (e) {
  let target = e.target;
  let message;
  switch (target.id) {
    case '30day':
      message = 'Custom text shown on 30d selected.';
      break;
    case '6month':
      message = 'Custom text shown on 6m selected.';
      break;
    case '1year':
      message = 'Custom text shown on 1y selected.';
      break;
  }
  result.textContent = message;
});

const link = document.querySelector('#link');
const warning = document.querySelector('#warning');
const url = "https://api.whatsapp.com/send";
let changed = false;
// 套餐ID与对应手机号的固定映射
const phoneMap = {
  '30day': '12345',
  '6month': '23456',
  '1year': '34567'
}
document.getElementById('select').addEventListener('change', function (e) {
  changed = true;
  warning.innerText = '';
  let target = e.target;
  const label = document.querySelector(`[for='${target.id}']`)
  let newUrl = url;
  // 匹配对应固定手机号拼接链接
  newUrl += `?phone=${phoneMap[target.id] || ''}`
  link.href = newUrl
});

link.addEventListener('click', () => {
  if (!changed) {
    warning.innerText = 'Custom text shown if package not selected'
    return;
  }
});

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