Tengo un código que no quiero casi copiar y pegar, sino que quiero una alternativa breve.
Tengo estos 4 elementos, todos los cuales deben manipularse, quiero colocar una Entrada dentro de ellos y editar algunos argumentos.
Ahora quiero ejecutar el mismo código para cada uno de estos 4.
const tableTaskName = document.getElementById('taskName_' + taskID); const tableStartTime = document.getElementById('startDate_' + taskID); const tableEndTime = document.getElementById('endDate_' + taskID); const tableStatus = document.getElementById('status_' + taskID); A continuación se muestran ejemplos en los que utilicé tableTaskName . La task es el parámetro que toma mi función, y es una tarea de la matriz de tasks en la parte inferior. El type debe ser texto para tableTaskName y tableStatus, para tableStartTime y tableEndTime debe ser time .
tableTaskName.innerHTML = '' tableTaskName.textContent = task.taskName; const inputTaskName = document.createElement('input'); inputTaskName.type = 'text'; var tasks = [{ 'id': 1, 'taskName': 'INIT', 'startDate': new Date('1970-01-01T00:00:00Z'), 'endDate': new Date('1970-01-01T00:00:10Z'), 'duration': new Date('1970-01-01T00:00:10Z'), 'status': 'RUNNING'}, { 'id': 2, 'taskName': 'INIT', 'startDate': new Date('1970-01-01T00:00:00Z'), 'endDate': new Date('1970-01-01T00:00:10Z'), 'duration': new Date('1970-01-01T00:00:10Z'), 'status': 'RUNNING'} ]¿Es el único método posible para copiar y pegar el código? Me gustaría hacerlo sin eso, si es posible.
En JavaScript, puede obtener una matriz de elementos utilizando document.getElementsByClassName() .
Entonces, si tiene varios elementos con el mismo nombre de clase, llenará la matriz. Luego, simplemente recorra la matriz y aplicará el código a todos los elementos.
Como esto:
<div class="divElement"></div> <div class="divElement"></div> <div class="divElement"></div> <script> var elements = document.getElementsByClassName("divElement"); for (var i = 0; i < elements.length; i++){ // code to edit elements } </script>Puede hacer una matriz de nombres de propiedades y luego hacer dos bucles for para pasar por las propiedades y la tarea:
const props = ['taskName', 'startDate', 'endDate', 'status'] ... for (let task of tasks) { for (let prop of props) { const tableProp = document.getElementById(prop + '_' + task.id) tableProp.innerHTML = '' tableProp.textContent = task[prop] const inputTaskName = document.createElement('input') if (prop == 'startDate' || prop == 'endDate') { inputTaskName.type = 'time' } else { inputTaskName.type = 'text' } tableProp.appendChild(inputTaskName) } }Aquí hay un ejemplo de trabajo. Acabo de asumir el diseño html:
const props = ['taskName', 'startDate', 'endDate', 'status'] const tasks = [{ id: 1, taskName: 'INIT', startDate: new Date('1970-01-01T00:00:00Z'), endDate: new Date('1970-01-01T00:00:10Z'), duration: new Date('1970-01-01T00:00:10Z'), status: 'RUNNING', }, { id: 2, taskName: 'Another task name', startDate: new Date('1970-01-01T00:00:00Z'), endDate: new Date('1970-01-01T00:00:10Z'), duration: new Date('1970-01-01T00:00:10Z'), status: 'stopped', }, ] for (let task of tasks) { for (let prop of props) { const tableProp = document.getElementById(prop + '_' + task.id) tableProp.innerHTML = '' tableProp.textContent = task[prop] const inputTaskName = document.createElement('input') if (prop == 'startDate' || prop == 'endDate') { inputTaskName.type = 'time' } else { inputTaskName.type = 'text' } tableProp.appendChild(inputTaskName) } } /* Just for demo */ .task-block { background-color: lightgrey; padding: 4px; } .task-block p { display: flex; flex-direction: column; align-items: flex-start; margin: 4px; } <div class="task-block"> <p id="taskName_1"></p> <p id="startDate_1"></p> <p id="endDate_1"></p> <p id="status_1"></p> </div> <br /> <div class="task-block"> <p id="taskName_2"></p> <p id="startDate_2"></p> <p id="endDate_2"></p> <p id="status_2"></p> </div>U simplemente toma los elementos y los pasa como un argumento a la función de representación. Puede manipular cada elemento como desee agregando este o aquel dato. Como salida, obtendrá la matriz de esos elementos.
let x = document.querySelector('#taskName'); let y = document.querySelector('#taskName2'); renderElement = (...elements) => { elements.forEach(element => { const inputTaskName = document.createElement('input'); inputTaskName.type = 'text'; element.appendChild(inputTaskName) }) return [elements]; } console.log(renderElement(x, y))