Question

我试图制作一个“ MEME Generator”，但由于当我：

上传>输入文本>提交

所有JS更改均恢复为默认状态。我可能只是想念一些东西，所以如果您能帮助我，我会帮上大忙

function topContent() {
  var topText = document.getElementById("userTopText").value;
  document.getElementById("topText").innerHTML = topText;
}

function changeImg() {

  document.getElementById("frame").style.background = "url(assets/Background.jpg    )";
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#frame {
  width: 20%;
  height: 60%;
  color: white;
  background-size: 20% 60%;
  background-repeat: no-repeat;
}

#frame h1 {
  text-align: center;
}

<div id="frame" width="20%" height="60%">
  <h1 id="topText"></h1>
</div>

<button onClick="changeImg()">Upload</button>

<form>
  <input type="text" id="userTopText">
  <button type="submit" onClick="topContent()">Enter</button>
</form>

Answer 1

问题与<form>提交的默认操作有关，是重新加载页面，从而删除了图像。在您的情况下，我将使用JQuery库并阻止表单执行该默认操作。

请参阅此堆栈溢出答案： Stop form refreshing page on submit

Answer 2

您的问题是您有以下代码：

end

这会将文本变成白色。更改此设置将解决您的问题。

Answer 3

想通了！

该：

<button type="submit" onClick="topContent()">Enter</button>

由于某种原因，type =“ submit”正在刷新页面

Answer 4

更改框架样式，以使文本不是白色：

#frame {
    width: 20%;
    height: 60%;
    color: black;
    background-size: 20% 60%;
    background-repeat: no-repeat;
}

更改表格，以便按钮返回。

<form>
    <input type="text" id="userTopText">
    <button onClick="return topContent()">Enter</button>
</form>

确保函数返回false，这告诉表单不要再提交。

function topContent() {
    var topText = document.getElementById("userTopText").value;
    document.getElementById("topText").innerHTML = topText;
    return false;
}

为什么文本不出现？

4 个答案: