How to get text label in input type radio?-CodePudding

I made a custom radio input like this. When selected, How do I get the value of the text label in the radio type input and bring it into the Syntax hyperlinks "Order Link"?

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

body {
  background:#2d2d2d;
  display:block;
  justify-content: center;
  align-items:center;
  flex-wrap:wrap;
  padding:0;
  margin:20;
  height:100vh;
  width:100vw;
  font-family: sans-serif;
  color:#FFF;
}

.select {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 50%;
  height: 40px;
}

.option {
  padding: 0 30px 0 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  background: #333;
  border-top: #222 solid 1px;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
  order: 2;
  z-index: 1;
  transition: background .4s ease-in-out;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;

}

.option:hover {
  background: #666;
}

.select:focus .option {
  position: relative;
  pointer-events: all;
}

input {
  opacity: 0;
  position: absolute;
  left: -99999px;
}

input:checked label {
  order: 1;
  z-index: 2;
  background: #666;
  border-top: none;
  position: relative;
}

input:checked label:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  position: absolute;
  right: 10px;
  top: calc(50% - 2.5px);
  pointer-events: none;
  z-index: 3;
}

input:checked label:before {
  position: absolute;
  right: 0;
  height: 40px;
  width: 40px;
  content: '';
  background: #666;
}

<!-- custom radio selected -->
 <div  style="margin:20px;" tabindex="1">
  <input  name="package" type="radio" id="" checked>
  <label for="" >Select package</label>

  <input  name="package" type="radio" id="30day">
  <label for="30day" >30 d package</label>

  <input  name="package" type="radio" id="6month">
  <label for="6month" >6 m package</label>

  <input  name="package" type="radio" id="1year">
  <label for="1year" >1 y package</label>
 </div>
 <br/>
 <!-- selected text result -->
 <p id="result" style="color:#fff;"></p>
 <!-- Order Link -->
 <a href="https://api.whatsapp.com/send?phone=123456789&text=Hello I want to order (this is the package label value text)
" target="_blank">order link</a>

In additional to, how do I create a variable for multiple phone numbers in javascript that works to be a random number every time a web page is opened or refreshed the phone number in the "Order Link" hyperlinks section "send?phone=123456789" will change randomly.

What I mean by random phone numbers are pre-defined ones, for example there are 5 choices of phone numbers to be randomized every time web page is opened or refreshed for eg random number is: "123456789,1987654321,122334455,112233445,165456781" and it seems better with the warning text shown on

<p id="result" style="color:#fff;"></p>

if "order link" clicked but custom selected not selected before.

CodePudding user response：

Yes, You can get the label of the radio by getting its for attribute which equals the id of the radio.

Also, I add a function to generate random numbers with specific length to generate the phone number.

I used encodeURIComponent to encode the text query parameter because there are spaces in it.

const getRandomPhoneNumber = () => {
  const phoneNumbers = ["123456789", "1987654321", "122334455",               "112233445", "165456781"]
  const randomIndex = Math.floor(Math.random() * (phoneNumbers.length))
  return phoneNumbers[randomIndex]
}

const phoneNumber = getRandomPhoneNumber()
let result = document.querySelector('#result');
const link = document.querySelector('#link');
const warning = document.querySelector('#warning');
const url = "https://api.whatsapp.com/send";
let changed = false;

const updateLink = (message) => {
  let newUrl = url;
  result.textContent = message;
  newUrl  = `?phone=${phoneNumber}`
  newUrl  = `?text=${encodeURIComponent(`Hello I want to order ${message}`)}`
  link.href = newUrl
}

updateLink('')

document.getElementById('select').addEventListener('change', function (e) {
  changed = true;
  warning.innerText = '';
  let target = e.target;
  const label = document.querySelector(`[for='${target.id}']`)
  let message = label.innerText;
  updateLink(message)
});
  
  
link.addEventListener('click', () => {
  if (!changed) {
    warning.innerText = 'You need to select a package.'
    return;
  }
})

body {
  background:#2d2d2d;
  display:block;
  justify-content: center;
  align-items:center;
  flex-wrap:wrap;
  padding:0;
  margin:20;
  height:100vh;
  width:100vw;
  font-family: sans-serif;
  color:#FFF;
}

.select {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 50%;
  height: 40px;
}

.option {
  padding: 0 30px 0 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  background: #333;
  border-top: #222 solid 1px;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
  order: 2;
  z-index: 1;
  transition: background .4s ease-in-out;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;

}

.option:hover {
  background: #666;
}

.select:focus .option {
  position: relative;
  pointer-events: all;
}

input {
  opacity: 0;
  position: absolute;
  left: -99999px;
}

input:checked label {
  order: 1;
  z-index: 2;
  background: #666;
  border-top: none;
  position: relative;
}

input:checked label:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  position: absolute;
  right: 10px;
  top: calc(50% - 2.5px);
  pointer-events: none;
  z-index: 3;
}

input:checked label:before {
  position: absolute;
  right: 0;
  height: 40px;
  width: 40px;
  content: '';
  background: #666;
}

<!-- custom radio selected -->
 <div  id="select" style="margin:20px;" tabindex="1">
  <input  name="package" type="radio" id="" checked>
  <label for="" >Select package</label>

  <input  name="package" type="radio" id="30day">
  <label for="30day" >30 d package</label>

  <input  name="package" type="radio" id="6month">
  <label for="6month" >6 m package</label>

  <input  name="package" type="radio" id="1year">
  <label for="1year" >1 y package</label>
 </div>
 <br/>
 <!-- selected text result -->
 <p id="result" style="color:#fff;"></p>
 <p id="warning" style="color:#FFA500;"></p>
 <!-- Order Link -->
 <a id="link" href="" target="_blank">order link</a>