onchange事件中sessionStorage.clear()无效，如何实现选test时清空文本框？

嘿，我一眼就瞅出问题所在了！你现在用sessionStorage.clear()是在清空浏览器的会话存储，但你的需求是清空文本框的内容——这俩完全不是一个东西，难怪没效果呀😅

问题根源 #

文本框的内容是存储在DOM元素本身的value属性里的，和sessionStorage没有直接关联。你现在调用的是会话存储的清空方法，自然不会影响到文本框的显示内容。

修正后的代码 #

首先给你的文本框添加一个id，方便我们获取它的DOM对象：

<input type="text" id="txtInput" value="">
<select id="abc" onchange="SesRes()">
  <option value="xyz">xyz</option>
  <option value="test">test</option>
</select>

然后修改你的JavaScript函数，直接操作文本框的value属性来清空内容：

function SesRes() {
  var x = document.getElementById("abc").value;
  if(x == "test") {
    // 获取文本框元素，将其值设为空字符串
    document.getElementById("txtInput").value = "";
  }
}

额外补充（如果需要用到sessionStorage的场景） #

要是你之前的逻辑是想用sessionStorage保存文本框的内容，那得先在文本框输入时把值存进去，比如：

// 假设文本框输入时触发保存
document.getElementById("txtInput").addEventListener('input', function() {
  sessionStorage.setItem('inputValue', this.value);
});

这时候清空的话，就需要同时清空sessionStorage和文本框：

function SesRes() {
  var x = document.getElementById("abc").value;
  if(x == "test") {
    sessionStorage.removeItem('inputValue'); // 或者用clear()清空全部会话存储
    document.getElementById("txtInput").value = "";
  }
}

但根据你描述的需求，直接操作文本框的value就足够啦。

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