What could be the reason for the text not showing up?

Question

What could be the reason for the text not showing up?

I'm currently working on developing a "MEME Generator" but I've hit a roadblock at this stage. Whenever I:

upload > Enter Text > Submit

All of the JavaScript changes revert back to the default state. It seems like I might be overlooking something, so any assistance would be greatly appreciated.

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>

javascript html css

Answer 1

Answer №1

The main issue here revolves around the default behavior of a <form> submission, which is to refresh the page and inadvertently remove your image. To address this problem, I recommend utilizing the JQuery library to prevent the form from executing this default action.

You can find more information in this helpful Stack Overflow thread: Stop form refreshing page on submit

Answer 2

The main issue here revolves around the default behavior of a <form> submission, which is to refresh the page and inadvertently remove your image. To address this problem, I recommend utilizing the JQuery library to prevent the form from executing this default action.

You can find more information in this helpful Stack Overflow thread: Stop form refreshing page on submit

Answer 3

Answer №2

The issue lies in the following snippet of code:

#frame {
    color: white;
}

By modifying this section, you will be able to resolve the problem at hand.

Answer 4

The issue lies in the following snippet of code:

#frame {
    color: white;
}

By modifying this section, you will be able to resolve the problem at hand.

Answer 5

Answer №3

Finally solved!

Here's the solution:

<button onClick="activateContent()">Click Me</button>

We discovered that removing the type="submit" prevented the page from refreshing unnecessarily.

Answer 6

Finally solved!

Here's the solution:

<button onClick="activateContent()">Click Me</button>

We discovered that removing the type="submit" prevented the page from refreshing unnecessarily.

Answer 7

Answer №4

Adjust the frame style so that the text is not displayed in white:

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

Modify the form to include a button that returns:

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

Ensure that the function returns false, indicating to the form not to submit afterwards:

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

Answer 8

Adjust the frame style so that the text is not displayed in white:

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

Modify the form to include a button that returns:

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

Ensure that the function returns false, indicating to the form not to submit afterwards:

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

What could be the reason for the text not showing up?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Managing OAuth2 redirections on the frontend: Best practices

Is there a method to categorize an array of objects by a specific key and generate a new array of objects based on the grouping in JavaScript?

How can I prevent overwriting previous input data in LocalStorage using Draftjs?

Guide on automatically navigating pages using HTML

Generate a series of inquiries from an API response and display them dynamically, complete with a text field and radio button for each question

Tips for continuing to write to the same CSV file without starting over

having difficulty grasping the variable's scope within this code

Having trouble with smooth scrolling for anchor links?

Difficulty arises when trying to engage with the addition span within a span using jQuery

Creating tabbed interfaces using jQuery and CSS

Reading an SQL File with Electron and Node.js: A Step-by-Step Guide

Problems with accessing Ajax login

How do I position an input box at the bottom of a split window using CSS?

The page comes to a standstill while trying to read through a hefty JSON

Execute code after the CSS has been loaded, but before the images start downloading

Disabling a button when the specified class condition is met

Altering the innerHTML of a <p> tag with a smooth transition

How can I check if the VPN is turned off in a React application?

Tips for changing input field type from "password" to "text" in Angular?

Divide Angular ngFor into separate divs