JavaScript提交HTML表单后选中图片被清除如何解决？

你遇到的表单提交后内容被清空的问题核心是表单默认提交行为会触发页面重载，所有前端临时修改的DOM状态都会被重置，另外你现有代码还存在几处逻辑错误需要同步修正才能正常运行：

核心修改点 #

• 给提交事件添加阻止默认行为的逻辑：调用evt.preventDefault()即可禁止表单提交触发的页面刷新
• 修正文本输入监听事件名：原生DOM的输入事件名为input，不需要加on前缀
• 提前定义error变量，避免运行时报错
• 错误提示追加前先清空容器内的历史内容，避免错误信息重复堆积
• 删除提交事件里无效的赋值逻辑，改为提交时统一同步一次表单内容到meme展示区

修正后的完整JS代码 #

let memeImg = document.querySelector("#meme-image");
let selectedImg = document.querySelector(".meme-display>img");
let topTxt = document.querySelector("#meme-top-text");
let enteredTxtTop = document.querySelector(".top-text");
let bottomTxt = document.querySelector("#meme-bottom-text");
let enteredBottomTxt = document.querySelector(".bottom-text");
// 提前定义error变量
let error = document.querySelector(".error");

// 封装统一同步表单内容到展示区的方法
function syncMemeContent() {
  // 先清空错误提示
  error.innerHTML = '';
  error.classList.add('hidden');
  let hasError = false;

  // 同步图片
  if (memeImg.value == "fry-meme") {
    selectedImg.src = "img/fry-meme.png";
  } else if (memeImg.value == "one-does-not-simply-meme") {
    selectedImg.src = "img/one-does-not-simply-meme.png";
  } else if (memeImg.value == "most-interesting-man-meme") {
    selectedImg.src = "img/most-interesting-man-meme.png";
  } else {
    hasError = true;
    error.innerHTML += "<p>Please select an image from list</p>";
  }

  // 同步顶部文本
  if (topTxt.value.trim() != "") {
    enteredTxtTop.innerHTML = topTxt.value;
  } else {
    hasError = true;
    error.innerHTML += "<p>Please enter charachters in top text </p>";
  }

  // 同步底部文本
  if (bottomTxt.value.trim() != "") {
    enteredBottomTxt.innerHTML = bottomTxt.value;
  } else {
    hasError = true;
    error.innerHTML += "<p>Please enter charachters in bottom text </p>";
  }

  // 有错误就显示错误提示
  if (hasError) {
    error.classList.remove("hidden");
  }
}

// 下拉选择图片时同步
memeImg.addEventListener("change", syncMemeContent);

// 顶部文本输入时同步，事件名修正为input
topTxt.addEventListener("input", syncMemeContent);

// 底部文本输入时同步，事件名修正为input
bottomTxt.addEventListener("input", syncMemeContent);

// 提交时同步内容，阻止默认提交行为
document.querySelector(".meme-form").addEventListener("submit", function(evt) {
  evt.preventDefault();
  syncMemeContent();
});

可选优化 #

如果你需要页面刷新后依然保留已经生成的meme内容，可以把选中的图片值、上下文本内容存在localStorage里，页面加载时读取存储的内容重新渲染即可。

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