Javascript - Is there any way to take the string from a function call argument?

Question

I am trying to call makeItem(breadstick) from my HTML, but I am getting an error: Uncaught ReferenceError: breadstick is not defined. I believe this is because, when you call a function, the parameters have to be either numbers or variables in your script.

Originally, breadstickvar was just breadstick, but then I got an Uncaught TypeError at var elem = document.getElementById(item + "Bar");. I am trying to make a reference to my HTML element, breadstickBar.

What I am hoping would happen was makeItem(breadstick) would be called, all of the item + "var" would be equal to "breadstickBar", and thus work, and document.getElementById(item + "Bar") would equal breadstickBar and reference my HTML element. I think this isn't working because breadstick is not a variable any more.

Is there any way to either:

1) Call the function so that I don't get an error.
2) Rearrange my code so that var elem = document.getElementById(item + "Bar"); works.

var breadstickvar = {
    number: 0,
    price: 1,
    time: 1000,
    beingMade: 0
};

function makeItem(item) {
    if ( (item + "var").beingMade == 0) {
        (item + "var").beingMade = 1;
        var elem = document.getElementById(item + "Bar");
        var width = 0;
        var id = setInterval(frame, 10);
        function frame() {
            if (width >= 200) {
                clearInterval(id);
            } else {
                width += 2;
                elem.style.width = width + 'px';
            }
        }
    }
}

It was like this before:

var breadstick = {
    number: 0,
    price: 1,
    time: 1000,
    beingMade: 0
};

function makeItem(item) {
    if ( item.beingMade == 0) {
        item.beingMade = 1;
        var elem = document.getElementById(item + "Bar");
        var width = 0;
        var id = setInterval(frame, 10);
        function frame() {
            if (width >= 200) {
                clearInterval(id);
            } else {
                width += 2;
                elem.style.width = width + 'px';
            }
        }
    }
}

It is very tricky to explain my question. I will try to clarify with edits. — William Jones, Sep 24 '18 at 18:44
You cannot compute a variable name without using `eval()`, and you probably shouldn't do that. You *can* compute object property names and use the `[ ]` operator to refer to them. — Pointy, Sep 24 '18 at 18:45
And in any case you need to pass the fragment of the name as a string. — Pointy, Sep 24 '18 at 18:46
So, are you trying to retrieve the variable name as a string in function call arguments? — vrintle, Sep 24 '18 at 18:48
Why not just pass the object as an argument? `var stuff = { breadstick: { number: 0, price: 1...}}; makeItem(stuff['breadstick'])` — Jared Smith, Sep 24 '18 at 18:48
@Rahul Yes, I am trying to have "breadstick" as the argument. — William Jones, Sep 24 '18 at 18:48
`var items = { "breadstick : {}, "pizza": {} }` than it is a simple look up `items[item].beingMade += 1` — epascarello, Sep 24 '18 at 18:50
@epascarello So, with this, can I call `breadstick` as the function's argument? — William Jones, Sep 24 '18 at 18:52

Javascript - Is there any way to take the string from a function call argument?

0 Answers0