How can I change the input and output of a function?

Question

I am trying to create a lock using HTML and JavaScript. I want to know how can I change the input and output of another function. Lets say I have a function

function a() {document.getElementById("x").id="b"}.

I want to change the element x and the id that's going to be changed "b" by using another function.

I have tried putting the function inside another function but hasn't worked

function a() {document.getElementById("x").id="b";}

function c() {document.getElementById("a()").document.getElementById="b";}

What you tried here can’t work. First of all, `"a()"` is a text literal - you’d be looking for an element that has the _literal_ id `a()` here. And even if you removed the quotes to make this an actual function call, `a` still doesn’t _return_ anything. — misorude, Sep 06 '19 at 07:02
You need to overwrite that function with your code: [how to override a javascript function](https://stackoverflow.com/questions/5409428/how-to-override-a-javascript-function) — Justinas, Sep 06 '19 at 07:04
Neither of your funcitons uses a parameter, and inside you're trying to use a DOM selector to access a function. I would suggest you start with beginner guides to HTML and JavaScript first to get an understanding of what you're doing. — Final'Cie, Sep 06 '19 at 07:04
The "_input_" of a function can be changed by changing the value of the passed arguments when calling a function. The "_output_" of a function can be changed by changing the return value (i.e. the value returned by `return` statement) in the function. See https://developer.mozilla.org/en-US/docs/Glossary/Function and also follow the "Learn more" links at the end of the article. — Teemu, Sep 06 '19 at 07:05

score 0 · Answer 1 · answered Sep 06 '19 at 07:11

0

Your "other" function should call the real function with arguments

function changeId(old, new) {

   document.getElementById(old).id =  new;

}

function my_caller() {

   changeId('x', 'b');      

   changeId('thisId', 'thatId');


}

answered Sep 06 '19 at 07:11

Charlie

22,886
11
59
90

Final'Cie · Answer 2 · 2019-09-06T07:18:07.850

Besides of my comment, You should work with parameters - at least in function a. This way a function c can overwrite the value set by function a.

However if a is called without a parameter it will set the newId value always to "b".

function a(newId) {
    if(newId!== undefined ||newId!== null) {
        document.getElementById("x").id=newId;
    }
    document.getElementById("x").id="b";
}

function c(){
    a("notB");
}

score 0 · Answer 3 · answered Sep 06 '19 at 07:13

0

You are making the code complex. Simply, one way to solve this using parameters in the function.

function a(x, b) {
  document.getElementById(x).id = b;
  }
  
a("abc", "abcd");

<div id="abc"></div>

answered Sep 06 '19 at 07:13

Ranjith

137
1
1
7

score 0 · Answer 4 · answered Sep 06 '19 at 07:38

You have two ways to modify existing code.

You can use an AST parser and modify the AST tree. This is the better way, but it is browser specific.
You can take the text of a function in order to perform string based manipulations. This is the hackish less reliable way, but it works in all browsers.

The following example shows how to do the later. The example converts the function a, which modifies the element with the id "x", into a function with the same name, which modifies the element with the id "y".

// The old function ...
function a() {document.getElementById("x").innerHTML="b"}

// ... modifies the the x element.
a();

// Convert the function to a string, replace "x" with "y"
// in the string and evaluate the result.
eval(a.toString().replace(/"x"/, '"y"'));

// The new function modifies the y element.
a();

<div id="x">x</div>
<div id="y">y</div>

How can I change the input and output of a function?

4 Answers4