Question

0

63

Views

how to skip 1st argument but give 2nd argument in JavaScript

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?

5 months ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-25T22:16:19.425Z

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

If you do not want to move it, you need to pass undefined. Please note null will not work

function createHtmlElement(parentId = "body", elementName = "div", elementContent = "", choice = "append") {
  console.log(parentId)
  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", "body") //this works totally fine
createHtmlElement(undefined, "h2", "this is h2 tag") // now it works

Alternatively pass an object and spread

function createHtmlElement(parms) {
  const { parentId, elementName, elementContent, choice } = parms;
  
  let parent = document.querySelector(`${parentId || "body"}`); // if passed use 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({"parentId": "body", "elementName":"h2", "elementContent": "this is h2 tag"}) 
createHtmlElement({"elementName":"h2", "elementContent": "this is h2 tag"})

Answer 2 · 2022-06-25T22:16:19.433Z

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

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

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

Answer 3 · 2022-06-25T22:16:19.439Z

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

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

function createHtmlElement(parentId = "body", elementName = "div", elementContent = "", choice = "append") {
  if (!parentId) {
    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") // console says the provided selector is empty

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.