Fetch text values from JSON and Display pop onclick text

Question

I have below code which will fetch the text from json & onclick text , display pop up box in page.... Now i need to give options to change font-family, font color....

But Adding the code in the place of Content is going to be extremely difficult....

Is there any way so that i can improve code structure or write same code in another way ?

JSON :

{        
          "font" : "Arian",
          "x" : 201,
          "y" : 461,
          "src" : "180ef82d1.otf",
          "width" : 679,
          "type" : "text",          
          "text" : "Good Food",          
          "name" : "edit_good_1"
}

script

const lightId = 'light' + layer.name
        const lightIdString = '#' + lightId
        $('.container').append(
            '<a id ="' + layer.name + '" onclick="openPopUp(' + lightId + ')"' +
            '<div class="txtContainer" contenteditable="true" ' +
            'style="' +
            'left: ' + layer.x + 'px; ' +
            'top: ' + layer.y + 'px; ' +            
            '">' + layer.text + '</div></a>' +
            '<div id="light' + layer.name + '" class="white_content" style="' +            
            'top: ' + layer.y + 'px; ' + '"> content <a href="javascript:void(0)" ' +
            'onclick="closePopUp(' + lightId + ')">Close</a></div> <div>'
        );
        document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'

codepen : https://codepen.io/kidsdial/pen/OGbGwN

fiddle : https://jsfiddle.net/kidsdial1/z6eyq4j3/

Answer 1

Your code is very prone to errors, since you write all your html tags and content as a single string. Containing html and javascript in that way is extremely unsafe.

I would suggest creating your elements with document.createElement() and then using the JSON to set all the attributes. In the function you could just pass the id, and then find the correct json data for that id.

Concept code

function buildPopup(id) {
  let layer = findJsonData(id)

  let popup = document.createElement("div")
  popup.classList.add("txtContainer")
  popup.id = layer.name
  popup.style.left = layer.x + "px"
  popup.style.top = layer.y + "px"
  popup.style.fontFamily = layer.font
  popup.innerHTML = layer.text

  // adding a close button
  let btn = document.createElement("button")
  popup.appendChild(btn)
  btn.addEventListener("click", ()=>{
      closePopup(layer.name)
  })

  document.body.appendChild(popup)
}

Example for calling this function

 <a onclick="openPopUp('edit_good_1')">Open popup</a>

Example for getting the json by id

 // this function will find the right json data for this id  
 function findJsonData(id){
     return {        
      "font" : "Arian",
      "x" : 201,
      "y" : 461,
      "src" : "180ef82d1.otf",
      "width" : 679,
      "type" : "text",          
      "text" : "Good Food",          
      "name" : "edit_good_1"
    }
 }

I realise this is a bit conceptual but hopefully it will point you in the right direction!

JSFiddle