嵌套两个函数——语法问题还是代码不正确？

Question

我有两个函数正在尝试组合，但在正确呈现和（更重要的是）在页面上按预期运行时遇到问题。我怀疑这是一个语法问题，但我是编码新手，所以我很可能会犯新手错误。

Fyi - function1 在 page1 上按预期显示/工作。当我在脚本标记中只有该函数并且在 head/body 标记中分别具有下面的输入标记时，Function2 正在按预期在第 2 页上显示。我遇到的问题是，当我尝试将[即嵌套]这两个函数组合在一个页面上，同时还将输入标签从 function2 拉入新嵌套函数的 innerHTML 中时。

目前，用户可以在 addy2 字段中输入地址，该地址将通过集成 API 调用自动完成（其本身/按原样完美运行）；我的目标是保留自动完成功能，但也让用户可以选择单击单选按钮 1 或单选按钮 2，并将第一个地址或第二个地址（分别）填充到 addy2 文本字段中。这可以吗？！？

function numeroUno() {
    const {
        addy1: e,
        addy2: t
    } = appState;
    document.getElementById("content").innerHTML = `\n    <h1>Title Placeholder</h1>\n    <div>\n      <label for="addy1">Address 1</label>\n      <input type="text" id="addy1" value="${e}" required>\n    </div>\n    <div>\n      <label for="addy2">Address 2</label>\n      <input type="text" id="addy2" value="${t}" required>\n    </div>\n    <button id="calc-btn">Calculate</button>\n  `, initAutocomplete()({
    calcBtn: calcDist
    })
}


function numeroDos(radioButtonId, textFieldId, textToPopulate) {
  // Get the radio button and text field elements
  const radioButton = document.getElementById(radioButtonId);
  const textField = document.getElementById(textFieldId);

  // Select the radio button
  radioButton.checked = true;

  // Populate the text field
  textField.value = textToPopulate;
  document.getElementById("content").innerHTML = `\n    <div class="mb-4">\n     <input type="text" id="addy1">\n     <input type="radio" id="radio1" name="myRadio" onclick="numeroDos('radio1', 'addy1', '123 address st, City, ST, Zip')">\n    <label for="radio1">Radio 1</label>\n    <input type="radio" id="radio2" name="myRadio" onclick="numeroDos('radio2', 'addy1', '456 address st, City, ST, Zip')">\n    <label for="radio2">Radio 2</label>\n    </div>\n  ` 
}

希望一切都有意义。预先感谢您提供的任何/所有帮助！

Answer 1

您可以通过组合这 2 个功能来实现您想要的功能。我认为最好将单选按钮集成到 numeroUno，并将 numeroDos 逻辑集成到自动完成中。

考虑类似于下面所附代码的内容：

    function numeroUno() {
    const { addy1, addy2 } = appState;
    document.getElementById("content").innerHTML = `
        <h1>Title Placeholder</h1>
        <div>
          <label for="addy1">Address 1</label>
          <input type="text" id="addy1" value="${addy1}" required>
        </div>
        <div>
          <label for="addy2">Address 2</label>
          <input type="text" id="addy2" value="${addy2}" required>
        </div>
        <div class="mb-4">
            <input type="radio" id="radio1" name="myRadio" onclick="populateAddress('radio1', 'addy2', '123 address st, City, ST, Zip')">
            <label for="radio1">Radio 1</label>
            <input type="radio" id="radio2" name="myRadio" onclick="populateAddress('radio2', 'addy2', '456 address st, City, ST, Zip')">
            <label for="radio2">Radio 2</label>
        </div>
        <button id="calc-btn">Calculate</button>
    `;

    initAutocomplete({
        calcBtn: calcDist
    });
}

function populateAddress(radioButtonId, textFieldId, textToPopulate) {
    const radioButton = document.getElementById(radioButtonId);
    const textField = document.getElementById(textFieldId);

    radioButton.checked = true;
    textField.value = textToPopulate;
}

所以这里你有一个组织得更好的逻辑，意思是：

函数 numeroUno 现在负责定义地址字段、单选按钮和计算按钮的 html 结构。并在选择单选按钮时集成 populateAddress 函数。

函数 numeroDos，我现在称之为 populateAddress，因为它现在更具描述性，只负责根据选定的单选按钮设置 addy2 的值，而不需要覆盖现有的 html 内容。

希望这有帮助！