How to enter value when radio input is selected?-CodePudding

I have a line of code for custom radio input like this. When selecting a radio the function will enter a random phone number into the hyperlink button, this works fine.

But how do you make a phone number non-randomized? So that I want to make in order of choice:

"Select 30d" then the number used is "12345",
"Select 6m" then the number used is "23456",
"Select 1y" then the number used is "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  id="select" tabindex="1" style="margin:20px;">
    <input  name="package" type="radio" id="" checked>
    <label for="" >Select package </label>
<br>
    <input  name="package" type="radio" id="30day">
    <label for="30day" >Select 30d</label>
<br>
    <input  name="package" type="radio" id="6month">
    <label for="6month" >Select 6m</label>
<br>
    <input  name="package" type="radio" id="1year">
    <label for="1year" >Select 1y</label>
  </div>
  
  <!--Text result on selected package-->
  <p id="result"  style="margin:20px;"></p>
  <p id="warning"  style="margin:20px;"></p>
  <!--submit link-->
  <a id="link"  style="margin:20px;">Submit Link</a>

CodePudding user response：

You need to put your switch case inside a select change handler and change your random phoneNumber function into that switch case

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  id="select" tabindex="1" style="margin:20px;">
  <input  name="package" type="radio" id="" checked>
  <label for="" >Select package </label>
  <br>
  <input  name="package" type="radio" id="30day">
  <label for="30day" >Select 30d</label>
  <br>
  <input  name="package" type="radio" id="6month">
  <label for="6month" >Select 6m</label>
  <br>
  <input  name="package" type="radio" id="1year">
  <label for="1year" >Select 1y</label>
</div>

<!--Text result on selected package-->
<p id="result"  style="margin:20px;"></p>
<p id="warning"  style="margin:20px;"></p>
<!--submit link-->
<a id="link"  style="margin:20px;">Submit Link</a>