如何实现点击已有API调用功能的按钮时显示隐藏的HTML textbox

完全可以在已绑定的API数据获取函数中同时实现文本框显示功能，无需额外绑定事件，具体实现步骤如下：

步骤1：设置文本框初始隐藏 #

两种常用实现方式按需选择即可：

• 方式1：内联样式控制，代码改动最小
  直接修改你的input代码，添加style属性即可实现初始隐藏，注意原代码中type="textbox"不是HTML标准属性值，建议替换为type="text"兼容性更好：

  <input type="text" id="city" style="display: none;">
  

• 方式2：CSS类控制，便于后续样式维护
  先在样式代码中定义隐藏类：

  .hidden {
    display: none;
  }
  

  再给input元素添加对应类实现初始隐藏：

  <input type="text" id="city" class="hidden">
  

步骤2：在现有JS函数中添加显示逻辑 #

直接在你已经绑定给按钮的API数据获取函数中，插入控制文本框显示的代码即可，示例如下：

// 这是你已绑定给按钮的原有函数
async function fetchApiData() {
  // 你原有获取、处理API数据的逻辑无需改动
  const res = await fetch('你的API请求地址');
  const data = await res.json();
  // 其他原有业务处理代码...

  // 新增文本框显示逻辑，对应你选择的隐藏方式二选一即可
  // 若用内联样式隐藏：
  document.getElementById('city').style.display = 'block';
  // 若用CSS类隐藏：
  // document.getElementById('city').classList.remove('hidden');
}

如果后续需要控制文本框再次隐藏，对应修改即可：

• 内联样式方式：document.getElementById('city').style.display = 'none';
• CSS类方式：document.getElementById('city').classList.add('hidden');
• 需要切换显隐状态可直接调用：document.getElementById('city').classList.toggle('hidden');

内容的提问来源于stack exchange，提问作者Cereais