const showLocation = () => {
const locationName = document.getElementById('locationName')
const selectedElement = document.querySelector('input[name="selected_location"]:checked').value
locationName.innerHTML = selectedElement
}
The HTML
<div class="bottom" onchange="showLocation()">
<ul>
<li>
<input type="radio" id="selected_location_nyr" name="selected_location" value="NEW_YORK_ROOT">
<label for="selected_location_nyr">New York Root</label>
</li>
The error I get is
(index):120
Uncaught ReferenceError: showLocation is not defined
at HTMLDivElement.onchange ((index):120:61)
The JavaScript declaration
<script src="javascript/test-123.js" defer></script>
<title>Document</title>
</head>
It's in my head tag but I added defer to it so that the page will continue to load.
Based on your comments I edit the answer, I guess what you need is something like this: Click on the Run Snippet to see the result
const radioInput = document.querySelector("#selected_location_nyr");
const locationName = document.querySelector("#selected_location");
radioInput.addEventListener("change", showLocation);
function showLocation() {
locationName.value = radioInput.value;
}<div class="bottom">
<ul>
<li>
<label for="selected_location_nyr">New York Root</label>
<input
type="radio"
id="selected_location_nyr"
name="selected_location"
value="NEW_YORK_ROOT"
/>
</li>
<li>
<label for="selected_location">Selected Location</label>
<input type="text" name="selected_location" id="selected_location" />
</li>
</ul>
</div>The section below shows how you can achieve the above functionality for multiple radio inputs
const radioInputs = document.querySelectorAll('input[type="radio"]');
radioInputs.forEach((radio) => {
radio.addEventListener("change", showLocation);
});
const locationName = document.querySelector("#selected_location");
function showLocation() {
locationName.value = this.value;
} <div><input type="radio" name="select_location" value="1" /> 1</div>
<div><input type="radio" name="select_location" value="2" /> 2</div>
<div><input type="radio" name="select_location" value="3" /> 3</div>
<div><input type="radio" name="select_location" value="4" /> 4</div>
<div class="bottom">
<ul>
<li>
<label for="selected_location">Selected Location</label>
<input type="text" name="selected_location" id="selected_location" />
</li>
</ul>
</div>