点击Add按钮后HTML文本框无法重置的技术求助

先看你给出的HTML代码，问题大概率出在这两个地方：

1. 你的按钮是type="submit"，如果它包裹在<form>标签里，点击时会默认触发表单提交，页面刷新后文本框的状态会被恢复，看起来就像没重置一样。
2. 你的add()函数可能没有正确实现重置文本框的逻辑。

下面给你两种具体的解决办法：

办法一：阻止表单默认提交行为 #

如果这个按钮确实需要保留submit类型（比如还要处理表单提交逻辑），可以修改add()函数来阻止默认行为，同时完成文本框重置：

首先修改按钮的点击事件，传入event参数：

<button type="submit" class="btn btn-success btn-sm m-b-10 m-l-5" onclick="add(event)">Add</button>

然后编写对应的JavaScript函数：

function add(event) {
  // 先执行你原本要做的Add操作（比如把文本框内容添加到select里）
  // 这里写你的业务逻辑，示例：
  // const inputVal = document.getElementById('inp').value;
  // const select = document.getElementById('pre-selected-options');
  // const option = document.createElement('option');
  // option.value = inputVal;
  // option.textContent = inputVal;
  // select.appendChild(option);
  
  // 重置文本框
  document.getElementById('inp').value = '';
  
  // 阻止表单默认提交，避免页面刷新
  event.preventDefault();
}

办法二：把按钮改成普通按钮 #

如果这个按钮不需要提交表单，直接把按钮的type改成button即可，这样就不会触发页面刷新：

<button type="button" class="btn btn-success btn-sm m-b-10 m-l-5" onclick="add()">Add</button>

然后编写add()函数：

function add() {
  // 执行你的Add业务逻辑
  // ...
  
  // 重置文本框
  document.getElementById('inp').value = '';
}

另外还要注意：确保你的JavaScript代码是在页面元素加载完成后执行的，比如把脚本放在<body>标签的末尾，或者用DOMContentLoaded事件包裹，避免出现找不到inp元素的情况。

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