recreate a .js file for multiply purposes-CodePudding

I Have a .js with multiply elements inside and functions and i use it with the 'document.write' in the index.js. I want this file to reuse it as 'new .js;' as many time i need it. Is there any way to do it? Example:

var renderer = document.createElement('div');
var bG = document.createElement('div');
var icon = document.createElement('img');
var lock = document.createElement('img');
var delete = document.createElement('button');
var txt = document.createElement('p');
var users = document.createElement('button');
var rIcon = document.createElement('img');

(function () {
    renderer.id = 'Renderer';
    bG.id = 'BG';
    icon.id = 'icon';
    lock.id = 'Lock';
    delete.id = 'Delete';
    txt.id = 'txt';
    users.id = 'Users';
    rIcon.id = 'rIcon';

    renderer.appendChild(bG),
    renderer.appendChild(users), renderer.appendChild(txt), renderer.appendChild(lock),
    renderer.appendChild(delete), renderer.appendChild(icon),renderer.appendChild(rIcon);

    document.body.appendChild(renderer);

    users.addEventListener('click', OnPress);
    users.addEventListener('mouseover', OnrollOver);
    users.addEventListener('mouseout', OnrollOut);
    delete.addEventListener('click', DeleteClick);

}());

I am trying with no hope... Do i need to make it class with constructor but if i make it, and how i will make it, how i will use it with the 'document.write' cause i need it and before the recreation?

Regards.

CodePudding user response：

The first thing I can tell you about, that you must keep away from the language keywords while naming your variables and function, like the delete variable you created.

The second thing, you can do that:

function createRenderer() {
    let old = document.getElementsByClassName('Renderer')

    let renderer = document.createElement('div');
    let bG = document.createElement('div');
    let icon = document.createElement('img');
    let lock = document.createElement('img');
    let deleteBu = document.createElement('button');
    let txt = document.createElement('p');
    let users = document.createElement('button');
    let rIcon = document.createElement('img');

    renderer.classList.add('Renderer')
    renderer.id = 'Renderer'   old.length   1;
    bG.id = 'BG'   old.length   1;
    icon.id = 'icon'   old.length   1;
    lock.id = 'Lock'   old.length   1;
    deleteBu.id = 'Delete'   old.length   1;
    txt.id = 'txt'   old.length   1;
    users.id = 'Users'   old.length   1;
    rIcon.id = 'rIcon'   old.length   1;

    renderer.append( bG, icon, lock, deleteBu, txt, users, rIcon )

    users.addEventListener('click', OnPress);
    users.addEventListener('mouseover', OnrollOver);
    users.addEventListener('mouseout', OnrollOut);
    deleteBu.addEventListener('click', DeleteClick);

    return renderer
}

and now your function is just a template for your renderer div, you can call it as much as you want, and every time you have an entirely new created renderer.

then you can use this function in many many places and you can assign it to a new variable too, and these how to use the function:

document.body.append( createRenderer() ) // to append the renderer to the body

document.body.appendChild( createRenderer() )  // the same the above

anotherElement.append( createRenderer() )   // to add the renderer to another div

and you can assign a new renderer in a new variable and use it as you can:

let newRendererOne = createRenderer()
newRendererOne.append( someChildren )   // to append new children for that specific renderer

let newRendererTwo = createRenderer()
newRendererTwo.style.color = "red"   // to change the bg color for that specific render.

and you can create many of it inside a loop.

I hope the idea is clear now..

CodePudding user response：

To reuse this code multiple times, you can define it as a function and then call the function as many times as you need. Here's an example of how you could do this:

function createRenderer() {
  var renderer = document.createElement('div');
  var bG = document.createElement('div');
  var icon = document.createElement('img');
  var lock = document.createElement('img');
  var delete = document.createElement('button');
  var txt = document.createElement('p');
  var users = document.createElement('button');
  var rIcon = document.createElement('img');

  renderer.id = 'Renderer';
  bG.id = 'BG';
  icon.id = 'icon';
  lock.id = 'Lock';
  delete.id = 'Delete';
  txt.id = 'txt';
  users.id = 'Users';
  rIcon.id = 'rIcon';

  renderer.appendChild(bG),
  renderer.appendChild(users), renderer.appendChild(txt), renderer.appendChild(lock),
  renderer.appendChild(delete), renderer.appendChild(icon),renderer.appendChild(rIcon);

  document.body.appendChild(renderer);

  users.addEventListener('click', OnPress);
  users.addEventListener('mouseover', OnrollOver);
  users.addEventListener('mouseout', OnrollOut);
  delete.addEventListener('click', DeleteClick);
}

You can then call the function as many times as you need, like this:

createRenderer();
createRenderer();
createRenderer();

This will create three renderer elements, each with their own set of child elements and event listeners.

If you want to use the document.write method to write the renderer elements to the page, you can call the createRenderer function inside of the document.write call, like this:

document.write(createRenderer());

This will write the renderer element to the page. You can call the createRenderer function multiple times inside of the document.write call to create multiple renderer elements.

Code 2:

the id attribute must be unique within a page. To make the createRenderer function work, you'll need to modify it so that it sets different id values for each instance of the renderer element. One way to do this is by using a counter variable that increments each time the createRenderer function is called, and appending this counter value to the id of each element.

Here's an example of how you can modify the createRenderer function to achieve this:

let rendererCounter = 0;

function createRenderer() {
  // Create all the elements
  var renderer = document.createElement('div');
  var bG = document.createElement('div');
  var icon = document.createElement('img');
  var lock = document.createElement('img');
  var delete = document.createElement('button');
  var txt = document.createElement('p');
  var users = document.createElement('button');
  var rIcon = document.createElement('img');

  // Set their IDs
  renderer.id = 'Renderer'   rendererCounter;
  bG.id = 'BG'   rendererCounter;
  icon.id = 'icon'   rendererCounter;
  lock.id = 'Lock'   rendererCounter;
  delete.id = 'Delete'   rendererCounter;
  txt.id = 'txt'   rendererCounter;
  users.id = 'Users'   rendererCounter;
  rIcon.id = 'rIcon'   rendererCounter;

  // Append all the elements to the renderer element
  renderer.appendChild(bG),
  renderer.appendChild(users), renderer.appendChild(txt), renderer.appendChild(lock),
  renderer.appendChild(delete), renderer.appendChild(icon),renderer.appendChild(rIcon);

  // Add event listeners
  users.addEventListener('click', OnPress);
  users.addEventListener('mouseover', OnrollOver);
  users.addEventListener('mouseout', OnrollOut);
  delete.addEventListener('click', DeleteClick);

  // Increment the counter variable
  rendererCounter  ;

  // Return the renderer element
  return renderer;
}

// Now you can create as many instances of the renderer element as you need by calling the createRenderer function
var renderer1 = createRenderer();
document.body.appendChild(renderer1);

var renderer2 = createRenderer();
document.body.appendChild(renderer2);