JavaScript - passing selected value of a radio button to a javascript function

Question

How can I pass the value of a selected radio button to a javascript function in a text input. For instance, I have two radio buttons, and want to pass the selected value to the function eg showOptions(this,'RADIO_VALUE',event) where RADIO_VALUE should be replaced with CDD or PF.

My radio buttons:
<div class="mb-5">
    <div class="form-check">
        <input class="form-check-input" type="radio" name="type" id="type-cdd" value="CDD" >
        <label class="form-check-label" for="type-cdd">CDD</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="type" id="type-pf" value="PF" >
        <label class="form-check-label" for="type-pf">PF</label>
    </div>
</div>

My input text box:
<div class="row mb-4">
    <div class="col-lg-6 col-md-8 form-group">
        <label for="cdd-domain-accession" class="mb-0">DESCRIPTION HERE</label>
        <input type="text" class="form-control" id="domain" placeholder="" name="kw" onkeyup="showOptions(this,'RADIO_VALUE',event)">
    </div>
</div>

Answer 1

How the event is detected is a bit missing... In short you can try this

var type = document.querySelector('input[name="type"]:checked').value

console.log(type);

Answer 2

I see where you have the showOptions function, here is my solution >:D

 var radios=[...document.all].filter(a=>a.type=="radio") //there probably is some queryselect method that can do the same thing(GET ALL RADIO BUTTONS IN A DOCUMENT) function radioValue(){ //will return the first radio that is checked(in your case only one radio can be checked at a time so it works) OR return null if no radio is clicked try{return radios.filter(a=>a.checked)[0].value} catch(err){return null} } //now for your showOptions function function showOptions(elem,value,ev){ console.log(`The TEXT input element is:\n\n`,elem,`\n\nThe value clicked radio(null if none clicked) is: ${value}\nThe key pressed in the TEXT input element is: ${ev.key}`) }

 My radio buttons: <div class="mb-5"> <div class="form-check"> <input class="form-check-input" type="radio" name="type" id="type-cdd" value="CDD" > <label class="form-check-label" for="type-cdd">CDD</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="type" id="type-pf" value="PF" > <label class="form-check-label" for="type-pf">PF</label> </div> </div> My input text box: <div class="row mb-4"> <div class="col-lg-6 col-md-8 form-group"> <label for="cdd-domain-accession" class="mb-0">DESCRIPTION HERE</label> <input type="text" class="form-control" id="domain" placeholder="" name="kw" onkeyup="showOptions(this,radioValue(),event)"> </div> </div>