How to enter value when radio input is selected?

Question

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/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>

Answer 1

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/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>