为什么文字没出现？

I'm attempting to make a "MEME Generator" but I got stuck at this point due to the fact that when i:

我正在尝试制作一个“MEME Generator”,但由于我在以下情况下我被困在这一点上

upload > Enter Text > Submit

上传>输入文字>提交

All of the JS changes restore to the default state. I'm probably just missing something so if you could assist me i would help greatly

所有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>

4 个解决方案

#1

The issue is to do with the default action of a <form> submit is to reload the page thus removing your image. In your case I'd use the JQuery library and prevent the form from doing that default action.

问题是与

Refer to this Stack Overflow answer: Stop form refreshing page on submit

请参阅此Stack Overflow答案:提交时停止表单刷新页面

#2

Your problem is you've got this code:

你的问题是你有这个代码:

#frame {
    color: white;
}

This is turning the text white. Changing this will solve your problem.

这使文本变白。更改此项将解决您的问题。

#3

Figured it out!!

弄清楚了!!

The:

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

For some reason the type="submit" was refreshing the page

由于某种原因,type =“submit”刷新了页面

#4

Change style of frame so text isn't white:

更改框架的样式,使文本不是白色:

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

Change form so button returns.

更改表单以便按钮返回。

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

Make sure function returns false, this tells the form not to then submit.

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

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

#1