Merge or extend JavaScript functions

Question

I am trying to get the values of several input fields and then displaying those values somewhere else on the page using JS functions. I will have 10 input fields, therefore is there a way I can optimize my JS code and write a function to loop through the values of the input fields and display them afterwards? Here are two functions which I wrote for two different fields:

function gotoTask() {
    var message = document.getElementById("goto").value;
    goto_message.innerHTML = message;
}

function waitTask() {
    var message = document.getElementById("wait").value;
    wait_message.innerHTML = message;
}

Answered already in ["Variable" variables in JavaScript](https://stackoverflow.com/questions/5187530/variable-variables-in-javascript) — Samathingamajig, Sep 13 '22 at 14:56
you asked a thing and showed the code for something else.. I mean if you want to factor your logic so that it loops through some elements and repeat the same action just do `document.querySelectorAll('input')` (I used the selector `input` but you didn't give enough details for that) and fetch all the returned elements to do anything you need to do with them — Diego D, Sep 13 '22 at 15:00
You can store the ids in a list and loop through them and call the function you want to perform dynamically using template literals. — Rahul K, Sep 13 '22 at 15:02

score 0 · Accepted Answer · answered Sep 13 '22 at 14:59

0

You could write a curry/factory function:

function createTaskFn(el, messageElId) {
   return function() {
    var message = document.getElementById(messageElId).value;
    el.innerHTML = message;
   };
}

var gotoTask = crateTaskFn(goto_message, 'goto');
var waitTask = crateTaskFn(wait_message, 'wait');

answered Sep 13 '22 at 14:59

Daniel A. White

187,200
47
362
445

So should I simply call the createTaskFn on every button click? How would it get which button has been clicked and which message to display? – Touseef Qamar Sep 13 '22 at 16:35

score 0 · Answer 2 · answered Sep 13 '22 at 14:59

0

Give same class to your all inputs , then select them by let inputArr = document.getElementsByClassName('inputsClass') , then loop through inputArr and display their values.

answered Sep 13 '22 at 14:59

Rahman Aliyev

78
4

score 0 · Answer 3 · answered Sep 13 '22 at 15:02

0

You could store all the ids in an array like so

const inputIds = ['goto', 'wait', ...]

Then you can iterate over that array and call your method like so

inputIds.forEach((id) => {
   const message = document.getElementById(id).value;
   document.getElementById(`${id}_message`).innerHTML = message;
})

Disadvantage of my implementation: Your ids of the message fields have to have the same structure [id]_message

answered Sep 13 '22 at 15:02

MrFabio_25

478
5
9

I want to display the input only when a button is clicked. Each input field has a separate button. Can I make this using an onclick function? – Touseef Qamar Sep 13 '22 at 15:59
So you don't want to execute the function for all 10 inputs at once? So every input has a button and if the user clicks on the button only one input field function gets executed. Right? – MrFabio_25 Sep 13 '22 at 16:05
Exactly. Every input has a separate button. – Touseef Qamar Sep 13 '22 at 16:07
Ok so I misunderstood your requirements. My implementation will execute for all 10 inputs at once. So I would suggest to use @Daniel A. White answer and call his method on every onclick handler – MrFabio_25 Sep 13 '22 at 16:25

Merge or extend JavaScript functions

3 Answers3