如何根据输入的学校区域代码字段值在span标签中展示自定义输出内容

完整实现代码 #

<style>
/* 模态框基础样式 */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  min-width: 400px;
}
#result {
  display: block;
  margin: 15px 0;
  line-height: 1.5;
}
#btn1 {
  float: right;
}
/* 重新输入按钮默认隐藏 */
#resetBtn {
  display: none;
  margin-left: 10px;
}
.open-modal-btn {
  display: block;
  margin: 30px auto;
  padding: 8px 16px;
  cursor: pointer;
}
</style>

<!-- 触发模态框的按钮 -->
<button class="open-modal-btn" onclick="document.querySelector('.modal-overlay').style.display = 'block'">查询文件获取资格</button>

<!-- 模态框结构 -->
<div class="modal-overlay">
  <div class="modal-content">
    <table align="center">
      <tr>
        <th>
          学校区域代码：<input type="text" name="areacode" id="areacode">
          <button onclick="locationlookup()" id="btn1">查询</button>
          <button onclick="resetQuery()" id="resetBtn">重新输入</button>
        </th>
      </tr>
      <tr>
        <th>
          <span id="result"></span>
        </th>
      </tr>
    </table>
  </div>
</div>

<script>
function locationlookup() {
  const areaCode = document.getElementById("areacode").value.trim();
  const resultEl = document.getElementById("result");
  const resetBtnEl = document.getElementById("resetBtn");
  let schooling;
  let isPass = false;

  if (areaCode == "11002" || areaCode == "11003") {
    schooling = "推荐提示信息：恭喜，你的学校有资格获取该课程文件";
    isPass = true;
  } else if (areaCode == "11004") {
    schooling = "你的学校符合资格，但需要提供良好行为证明才可获取文件";
    isPass = true;
  } else {
    schooling = "致歉提示信息：抱歉，我们目前暂未在你输入的区域提供服务";
    isPass = false;
  }

  // 如果需要保留富文本样式可替换为 innerHTML
  resultEl.textContent = schooling;
  // 校验不通过显示重新输入按钮
  resetBtnEl.style.display = isPass ? "none" : "inline-block";
}

function resetQuery() {
  document.getElementById("areacode").value = "";
  document.getElementById("result").textContent = "";
  document.getElementById("resetBtn").style.display = "none";
  document.getElementById("areacode").focus();
}
</script>

主要改动说明 #

• 新增弹窗模态框，点击页面上的「查询文件获取资格」按钮即可弹出查询界面，所有操作都在当前页面完成无需跳转
• 将原有的只读输入框替换为span标签，解除表单元素的展示限制，文本可自适应换行
• 新增重新输入按钮，仅在校验不通过时显示，点击后自动清空输入内容和历史提示，回到初始输入状态
• 优化代码逻辑，合并相同提示的判断条件，去掉冗余代码

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