Javascript not creating spans as supposed to

Question

I have a hardcoded span group to which I would like to add more spans from user input, I have tried to do this with a template and without but neither option works out for me

CSS:

.item { /*This is the style I want my new spans to inherit*/
        display: flex;
        align-items: center;
        height: 48px;
        line-height: 48px;
        cursor: pointer;
        padding-left: 24px;
    }
    
    .item:hover {
        background-color: rgba(0, 0, 0, 0.04);
    }

    

I'm trying to collect a user input from my modal to append it into my other spans which I hardcoded to see what it looks like for now

HTML:

<!------------------------------------------------------------- The modal from which i will be taking the input---------------------------------->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <form name="newLayerForm" onsubmit="return validateNewLayerName()" method="post" required>
            <span class="close">&times;</span>
            <p>Name your new Layer: </p>
            <input placeholder="Type your desired layer name" type="text" name="newLayerName" id="newLayerName">
             <button type="submit" value="submit" id="submitNewLayer" class="miro-btn miro-btn--primary miro-btn--small" 
             style="border: none; background-color: rgb(46,139,87); font-size: 15px; padding: 0px">Create</button>
        </form>
    </div>
</div>
<!----------------------------------------------------------------End of modal ------------------------------------------------------------------>

</div>
<template>
        <div class="item item-layer"><span id="displayLayer"></span></div>
        <span>sample layer 1</span>
        <span>sample layer 2</span>
    <!------------------------------------ template for the first function to add spans into ----------------->
</template>
<div class="miro-p-medium" style="font-size: 20px;">
    <div class="item item-layer"><span id="displayLayer">sample layer 1</span></div>
    <div class="item item-layer"><span>sample layer 2</span></div>
    <div class="item item-layer"><span>sample layer 3</span></div>
    <div class="item item-layer"><span>sample layer 4</span></div>
</div>

I have tried 2 ways to achieve this in my javascript code, 1 way with doing all of this inside a template and the other way to just use a div, at some point the input was being added when i appended it to body for about 1 second before disappearing, but I would also like the input from modal to inherit the same style and place in html as the 4 hardcoded spans I have right now

Javascript:

let template = document.querySelector('template').content
let layerTemplate = template.querySelector(".item-layer") 
//modals
let modal = document.getElementById("myModal")
let btn = document.getElementById("btnCreate")
let span = document.getElementsByClassName("close")[0]

//function layerCreator(userInput) { // attempt with template
    //let layerEl = layerTemplate.clondeNode(true)
    //layerEl.querySelector("span").innerText = userInput
    //document.getElementById("displayLayer").innerHTML = userInput
    //return layerEl
//}

function layerCreatorX(input) { //attempt to directly insert into body
    let x = document.createElement("span")
    let t = document.createTextNode(input)
    x.appendChild(t)
    document.body.appendChild(x)
}


function validateNewLayerName() { // validates for empty input from input field
    let input = document.forms["newLayerForm"]["newLayerName"].value
    if (input == "" || input == null) {
        alert("Cannot submit empty field, please try again!")
        return false
    }
    else {
        //this appends layer list with new layer
        layerCreatorX(input)
    }
}

I'm not too experienced in JS so I will be thankful for any suggestions or articles to look into

added just the most essential parts of the code, can add more if needed

Update: Forgot to include the function where i validate input from modal and use the function, it is now added in JS part

Answer 1

You are missing some key things:

1. You didn't post your validateNewLayerName function. This should return false , to avoid submitting the form.
2. You are not calling layerCreatorX and passing the value of newLayerName in the newLayerForm form.
3. You did not apply the class names item item-layer to the new span you created.
4. You are not adding the span to the .miro-p-medium container.

 const template = document.querySelector('template').content const layerTemplate = template.querySelector(".item-layer") const modal = document.getElementById("myModal") const btn = document.getElementById("btnCreate") const span = document.getElementsByClassName("close")[0] function validateNewLayerName() { let input = document.forms["newLayerForm"]["newLayerName"].value if (input == "" || input == null) { alert("Cannot submit empty field, please try again!"); } else { layerCreatorX(input); } return false; // Avoid submitting the form... } function layerCreatorX(input) { const x = document.createElement("span"); const t = document.createTextNode(input); x.className = 'item item-layer'; // Add the appropriate class. x.appendChild(t); document.querySelector('.miro-p-medium').appendChild(x); // Let the modal window know that is can be closed now... }

 .item { display: flex; align-items: center; height: 48px; line-height: 48px; cursor: pointer; padding-left: 24px; } .item:hover { background-color: rgba(0, 0, 0, 0.04); } .modal { position: absolute; border: thin solid grey; background: #FFF; padding: 0.5em; right: 4em; }

 <div id="myModal" class="modal"> <div class="modal-content"> <form name="newLayerForm" onsubmit="return validateNewLayerName()" method="post" required> <span class="close">&times;</span> <p>Name your new Layer: </p> <input type="text" id="newLayerName" name="newLayerName" placeholder="Type your desired layer name"> <button type="submit" id="submitNewLayer" value="submit" class="miro-btn miro-btn--primary miro-btn--small" style="border: none; background-color: rgb(46,139,87); font-size: 15px; padding: 0px">Create</button> </form> </div> </div> <template> <div class="item item-layer"> <span id="displayLayer"></span> </div> <span>sample layer 1</span> <span>sample layer 2</span> </template> <div class="miro-p-medium" style="font-size: 20px;"> <div class="item item-layer"><span id="displayLayer">sample layer 1</span></div> <div class="item item-layer"><span>sample layer 2</span></div> <div class="item item-layer"><span>sample layer 3</span></div> <div class="item item-layer"><span>sample layer 4</span></div> </div>