This createHtmlElement() function will by default create a <div> tag in body with nothing as content dynamically. But if the user does not provide parentId argument and skips to elementName parameter by using a comma (like this { createHtmlElement("", "div", "hello", "append") }) then it says: "Uncaught DOMException: Failed to execute 'querySelector' on 'Document': The provided selector is empty."

function createHtmlElement(parentId = "body" , elementName = "div", elementContent = "", choice ="append"){

            let parent = document.querySelector(`${parentId}`) || document.body; //parent element (parentId)
            let newElement = document.createElement(`${elementName}`)//created element (newElementName)
                newElement.textContent = `${elementContent}`;//element content (newElementContent)
            console.log(parent)
            console.log(newElement)
            parent.appendChild(newElement);
        }

        createHtmlElement("body" , "h2", "this is h2 tag")//this works totally fine
        createHtmlElement("", "h2","this is h2 tag")// console says the provided selector is empty

Please tell me how can i give a functionality that if i do not give 1st argument but i can give 2nd argument and the function executes normally. because if create 20 or 30 tags and writing "body" in each line it is time consuming and also space consuming how can i skip the first argument and give value of 2nd argument?

CodePudding user response：

Move parentId the end, then you can omit it

function createHtmlElement(elementName = "div", elementContent = "", choice = "append", parentId = "body") {

  let parent = document.querySelector(`${parentId}`) || document.body; //parent element (parentId)
  let newElement = document.createElement(`${elementName}`) //created element (newElementName)
  newElement.textContent = `${elementContent}`; //element content (newElementContent)
  console.log(parent)
  console.log(newElement)
  parent.appendChild(newElement);
}

createHtmlElement("h2", "this is h2 tag", "body") //this works totally fine
createHtmlElement("h2", "this is h2 tag") // now it works

CodePudding user response：

You can simply pass undefined to skip an argument for JavaScript:

    function createHtmlElement(parentId = "body" , elementName = "div", elementContent = "", choice ="append")
{
...
}

createHtmlElement(undefined, "h2", "this is h2 tag")

CodePudding user response：

add below line one the first line of your createHtmlElement function.

if(!parentId){
  parentId = "body"
}

However, I would suggest you to change your argument to an object instead of multiple arguments:

function createHtmlElement(options) {
  if(!options){ 
    throw new Error("options is missing")
  }
  let parentId = options.parentId || "body" 
  let elementName = options.elementName
  let elementContent = options.elementContent 
  let choice = options.choice
  // following by your logics
}

So when you call the function, you can simply do like this instead of enter empty string:

createHtmlElement({
  parentId: "body" , //just remove this property if you don't want to do this step
  elementName: "div",
  elementContent: "",
  choice: "append
})

This helps you to recognize which argument is for what purpose when you calling the function, especially when you want to use it for so many times, in the future you may forgot the 2nd or 3rd argument is for what purpose then you have to keep scroll back to the function to check what the purpose of argument.

CodePudding user response：

You cannot really skip the first argument in JavaScript you can call the function using undefined as the first parameter like so:

createHtmlElement(undefined, "h2","this is h2 tag")

but that kind of defeats the purpose of not writing body on each line.

I can think of two relatively simple solutions:

1. Move the parameter to the end so you will be able to skip it (but there will be cases that you will need to define it).
2. Create a helper function that passes in the parameter by default like so:

function createHtmlElementUnderBody(elementName = "div", elementContent = "", choice = "append") {
  createHtmlElement("body", elementName, elementContent, choice);
}

(you can change the name of the new function to be more concise)

CodePudding user response：

do not pass in the "". If you do, js assigns "" to parentID and that is why you see the error

createHtmlElement("body", "h2", "this is h2 tag"); //this works totally fine
createHtmlElement("h2", "this is h2 tag"); // do not pass ""

CodePudding user response：

In your function, check if parentId == "". If its true just say parentId = "body"