CODEWITHSUNDEEP
javascripthtmlcss
user14111713
user14111713

Reputation:

Javascript not creating spans as supposed to

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

Upvotes: 1

Views: 63

Answers (1)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48640

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>

Upvotes: 1

Related Questions