Question 218058 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how can i write this code with one function

how can i write this code with one function?

function myFunction1() {
  document.querySelector("#demo").innerHTML = document.querySelector("#demo1").innerHTML;
}

function myFunction2() {
  document.querySelector("#demo").innerHTML = document.querySelector("#demo2").innerHTML;
}

function myFunction3() {
  document.querySelector("#demo").innerHTML = document.querySelector("#demo3").innerHTML;
}

function myFunction4() {
  document.querySelector("#demo").innerHTML = document.querySelector("#demo4").innerHTML;
}

function myFunction5() {
  document.querySelector("#demo").innerHTML = document.querySelector("#demo5").innerHTML;
}

function myFunction6() {
  document.querySelector("#demo").innerHTML = document.querySelector("#demo6").innerHTML;
}
Tags:

4

Answers


  1. 0

    Use a parameter on the function: (i’ve named it n, but you can name it something else if that sounds better to you)

    function myFunction(n) {
  document.querySelector("#demo").innerHTML = document.querySelector("#demo" + n).innerHTML;
}
    Login or Signup to reply.
  2. 0

    Just pass the element that the function should work with into the function as an argument.

    // Get your static DOM references just once, rather
// than every time the function runs
const demo = document.querySelector("#demo");
const data = document.querySelector(".data");

// Function is set up to accomodate 2 arguments
// to be passed in. The event argument is automatically
// passed in when the function is registered as an
// event handler with .addEventListener(). The second
// argument will reference whatever element is passed
// for the second parameter.
function myFunction(event, element) {
  demo.innerHTML = element.innerHTML;
}

document.querySelector("button").addEventListener("click", function(event){
  // Invoke the handler and pass appropriate references
  myFunction(event, data);
});
    <div id="demo"><b>Sample Text</b></div>
<div class="data"><i>Some other text</i></div>

<button type="">Go!</button>
    Login or Signup to reply.
  3. 0

    Here’s how you can do it:

    function copyInnerHTML(sourceId, targetId = "#demo") {
  document.querySelector( targetId ).innerHTML = document.querySelector(sourceId).innerHTML;
}

copyInnerHTML("#demo1"); // This will copy innerHTML from #demo1 to #demo
copyInnerHTML("#demo2"); // This will copy innerHTML from #demo2 to #demo
copyInnerHTML("#demo3"); // This will copy innerHTML from #demo3 to #demo
copyInnerHTML("#demo4"); // This will copy innerHTML from #demo4 to #demo
copyInnerHTML("#demo5"); // This will copy innerHTML from #demo5 to #demo
copyInnerHTML("#demo6"); // This will copy innerHTML from #demo6 to #demo
    <!-- Source elements -->
<div id="demo1">Source Content 1</div>
<div id="demo2">Source Content 2</div>
<div id="demo3">Source Content 3</div>
<div id="demo4">Source Content 4</div>
<div id="demo5">Source Content 5</div>
<div id="demo6">Source Content 6</div>

<!-- Target element -->
<div id="demo">Target Content</div>

    Making the target ID a parameter would indeed enhance the flexibility and reusability of the function.

    Login or Signup to reply.
  4. 0

    You could try adding the function to the window object dynamically.

    const sleep = async (ms) => new Promise((res) => setTimeout(res, ms));

Array.from({ length: 6 }, (_, index) => {
  const globalFunctionName = `myFunction${index + 1}`;
  window[globalFunctionName] = () => {
    const sourceSelector = `#demo${index + 1}`;
    document.querySelector('#demo').innerHTML = document.querySelector(sourceSelector).innerHTML;
  }
});

(async () => {
  myFunction1();
  await sleep(1000);
  myFunction2();
  await sleep(1000);
  myFunction3();
  await sleep(1000);
  myFunction4();
  await sleep(1000);
  myFunction5();
  await sleep(1000);
  myFunction6();
  await sleep(1000);
})();
    .hidden { display: none; }
    <div id="demo"></div>

<div id="demo1" class="hidden">Demo 1</div>
<div id="demo2" class="hidden">Demo 2</div>
<div id="demo3" class="hidden">Demo 3</div>
<div id="demo4" class="hidden">Demo 4</div>
<div id="demo5" class="hidden">Demo 5</div>
<div id="demo6" class="hidden">Demo 6</div>

    A better way would be to pass the selector:

    const sleep = async (ms) => new Promise((res) => setTimeout(res, ms));

const myFunction = (sourceSelector) => {
  document.querySelector('#demo').innerHTML = document.querySelector(sourceSelector).innerHTML;
};

(async () => {
  myFunction('#demo1');
  await sleep(1000);
  myFunction('#demo2');
  await sleep(1000);
  myFunction('#demo3');
  await sleep(1000);
  myFunction('#demo4');
  await sleep(1000);
  myFunction('#demo5');
  await sleep(1000);
  myFunction('#demo6');
  await sleep(1000);
})();
    .hidden { display: none; }
    <div id="demo"></div>

<div id="demo1" class="hidden">Demo 1</div>
<div id="demo2" class="hidden">Demo 2</div>
<div id="demo3" class="hidden">Demo 3</div>
<div id="demo4" class="hidden">Demo 4</div>
<div id="demo5" class="hidden">Demo 5</div>
<div id="demo6" class="hidden">Demo 6</div>

    Alternatively,

    (async () => {
  for (let i = 1; i <= 6; i++) {
    myFunction(`#demo${i}`);
    await sleep(1000);
  }
})();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search