const showLocation = () => { const locationName = document.getElementById('locationName') const selectedElement = document.querySelector('input[name="selected_location"]:checked').value locationName.innerHTML = selectedElement }el 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>el error que me sale es
(índice):120
Uncaught ReferenceError: showLocation is not defined at HTMLDivElement.onchange ((index):120:61)La declaración de JavaScript
<script src="javascript/test-123.js" defer></script> <title>Document</title> </head>Está en mi etiqueta principal, pero agregué diferir para que la página continúe cargándose.
Según sus comentarios, edito la respuesta, supongo que lo que necesita es algo como esto: haga clic en Run Snippet para ver el resultado
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> La siguiente sección muestra cómo puede lograr la funcionalidad anterior para múltiples entradas de radio
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>