選擇無線電輸入時如何輸入值？

我有一行input這樣的自定義收音機代碼。選擇收音機時，該功能會在超鏈接按鈕中輸入一個隨機電話號碼，這很好用。

但是如何使電話號碼非隨機化？所以我想按選擇順序進行：

• "選擇 30d" 那么使用的數字是 "12345",
• "選擇 6m" 那么使用的數字是 "23456",
• “選擇 1y”然后使用的數字是“34567”。

//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;
    }
  });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

您需要將您的switch案例放在select更改處理程式中并將您的隨機phoneNumber函式更改為該switch案例

const link = document.querySelector('#link');
const warning = document.querySelector('#warning');
const result = document.querySelector('#result');
let changed = false;

document.getElementById('select').addEventListener('change', e => {
  const phoneNumbers = ["12345", "23456", "34567"]
  let target = e.target;
  let message;
  let number;
  switch (target.id) {
    case '30day':
      message = 'Custom text shown on 30d selected.';
      number = phoneNumbers[0];
      break;
    case '6month':
      message = 'Custom text shown on 6m selected.';
      number = phoneNumbers[1];
      break;
    case '1year':
      message = 'Custom text shown on 1y selected.';
      number = phoneNumbers[2];
      break;
  }
  result.textContent = message;
  changed = true;
  link.href = `https://api.whatsapp.com/send?phone=${number}`;
  console.log(link.href)
});

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

標籤：javascript html

上一篇：如何根據物件的值將物件添加到陣列中？

下一篇：操作嵌套的物件陣列以訪問子值