JavaScript 箭头功能未按预期工作

Question

const showLocation = () => {
    const locationName = document.getElementById('locationName')
    const selectedElement = document.querySelector('input[name="selected_location"]:checked').value
    locationName.innerHTML = selectedElement
}

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>

我得到的错误是

(指数):120

   Uncaught ReferenceError: showLocation is not defined
at HTMLDivElement.onchange ((index):120:61)

JavaScript声明

<script src="javascript/test-123.js" defer></script>
<title>Document</title>
</head>

它在我的 head 标签中，但我向其添加了 defer 以便页面将继续加载。

Answer 1

根据您的评论我编辑了答案，我想您需要的是这样的：单击运行代码段查看结果

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>

以下部分展示了如何为多个 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>

JavaScript 箭头功能未按预期工作

JavaScript Arrow function not working as expected

javascript

referenceerror