Image not showing over text on form submit

Question

Trying to create a meme generator that spits out an image and puts some input text over it.

I have gotten this to the point where it creates the image and a text html with everything the way I want it, but the text is not showing up over the image when I submit the form. I can tell that the html for the text is accepting and updating correctly with the input text, but text just not showing.

I tried setting the div wrapper to a position:relative and the text to position:absolute with a top setting, but no dice. Doing this just with vanilla JS..

Any help would be hugely appreciated!

here is the Code that I have:

'use strict';

let count=0;

// SUBMIT FORM
document.getElementById('memeInput').addEventListener('submit',function(e){
    count++;

    //prevent default
    e.preventDefault();

    //set image, top, and bottom to variables we can work with

    let bottomText = document.getElementById('bottomText').value;

    createMeme();
    appendTop();

    
})


function createMeme(){
        let image = document.getElementById('imageLink').value;

        //create the 'meme'
        let meme = document.createElement("IMG");

        //add that meme to the memeSection
        document.getElementById('memeSection').appendChild(meme);
    
        //set the id = meme plus count so that multiple can be created at once, and then set the image equal to the image input link based on the form 
        meme.setAttribute("id", "meme"+count);
        document.getElementById("meme"+count).src=image;    
}



function appendTop(){
    // put the top text in the image
    let topText = document.getElementById('topText').value;
    let top = document.createElement("H1");
    document.getElementById('meme' + count).appendChild(top);
    top.setAttribute("id","text"+ count);
    document.getElementById("text" + count).innerHTML = topText;
}

#memeSection{
    position:relative;
}

#memeSection > img{
    height:60vh;
    margin:5vh;
}

#memeSection > h1{
    position:absolute;
    top:5px;
    color:white;
    top: 10px;
    left:5px;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

<title>Meme</title>

</head>
<container>
    <body>
        <div class="text-center">
            <h1>Meme Generator</h1>
        </div>
        <div class="text-center">
            <form action="#" id="memeInput"> 
                <div>
                    <label for="image">Image Link</label>
                    <input type="url" id="imageLink">
                </div>
                <div>
                    <label for="topText">Text at Top</label>
                    <input type="topText" id="topText">
                </div>
                <div>
                    <label for="bottomText">Text at Bottom</label>
                    <input type="bottomText" id="bottomText">
                </div>
                <input type="submit" value="Make Meme">
            </form>
        </div>

        <div id="memeSection" class="col-12 col-lg-6">

        </div>

    </body>
<script src="script.js"></script>
</container>
</html>

score 0 · Answer 1 · edited Aug 01 '21 at 13:47

After Inspecting your Code, I ended up with that the Text at Top is appended as you wanted but it is not shown because of your Styling and if you want to add a text onto a image this is not the way it is done,

Read This Question At StackOverflow it has detailed information on how you can add text to a image

Or

Checkout this tutorial On YouTube which Will for sure help you to achieve your Goal

Image not showing over text on form submit

1 Answers1