JavaScript Arrow function not working as expected

Question

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.

Answer 1

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>