Javascript: Flexibility of function parameters?

Question

The description of Javascript function parameters on W3Schools wasn't very clear, so I just want to clarify.

From my understanding, there isn't a type restriction; the "real value" of the parameters are passed into the method. Is there a way to pass objects or elements? Or is that what is meant by "real value"?

For example:

The function displayText meant to take input text and set a display to show a new word in the given input text, going to the next word every time it's called.

function displayText() {
    var text = document.getElementById("words").value; 
// Since text is initialized   
// every time the method is called, 
// it will always start at the beginning of the text area. 
// Not sure how to fix this since making `text` 
// a global variable doesn't work 
    var list = text.split(/[ \t\n]+/);
    displayNext(list, "display");
}

There is a "helper" method, displayNext, which is supposed to shift to the next word in the list and sets the display to that word.

function displayNext(list, textboxID) {
    document.getElementById(textboxID).innerHTML = list.shift();
}

This isn't working as it is intended. I'm fairly sure it's because I've mucked up something with the parameters, since displayNext sets innerHTML to null. list must have not passed properly. I'm not sure how to fix this.

I'm sure there's a more efficient way to do this, but this is a good opportunity to learn how Javascript parameters actually work, so I thought I'd ask.

JSFiddle

You make a fresh array each time, so you shift() the same value off of that new array. also, mutable values (typically objects) are _essentially_ passed by reference, while immutable primitives are _essentially_ passed by value. — dandavis, Jan 29 '16 at 22:04
Side note: you can't use `var text` inside `displayText` function, because since `text` is a parameter, it is already defined. — Michał Perłakowski, Jan 29 '16 at 22:04

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

Based on the comments in your code, it sounds like you want displayText() to display the "next" word each time. To do that, you have to create some place to store some state about which word is the next one to display. As you have it now, you create a new array every time and always display the first word.

The simplest way is to create a variable outside your function in some lasting scope where you store the word number:

var wordNum = 0;
function displayText() {
    var text = document.getElementById("words").value; 
    var list = text.split(/\s+/);
    if (list.length !== 0) {
        // make sure we aren't off the end of the list
        wordNum = wordNum % list.length;
        displayNext(list[wordNum++], "display");
    }
}

function displayNext(text, textboxID) {
    document.getElementById(textboxID).innerHTML = text;
}

For a lot more info about arguments to Javascript functions and even how you can detect what arguments were passed or overload arguments, see this answer: How to overload functions in javascript? and for more info about how arguments are passed: Javascript by reference vs. by value

edited May 23 '17 at 12:31

Community

1
1

answered Jan 29 '16 at 22:13

jfriend00

683,504
96
985
979

Thank you for your detailed explanation! – user3450277 Jan 30 '16 at 00:04
It seems like I'm still getting the same issue, though. unfortunately. I get an error message: Uncaught TypeError: Cannot set property 'innerHTML' of null. Do you know why this is? I'm using window.onload so there shouldn't be issues with the HTML not loading before the scripts – user3450277 Jan 30 '16 at 00:07
@user3450277 - If that message comes from this code, then means that `document.getElementById(textboxID)` is not finding a match DOM element and thus returns `null`. If you create a jsFiddle that shows your issue, we can likely help you fix it in minutes. Otherwise, that's an issue with either your HTML of the timing of when you're running your Javascript, neither of which you have disclosed to us. – jfriend00 Jan 30 '16 at 00:15
Okay! I made one. Hopefully this works and thank you for the help! I'll add it to the post as well – user3450277 Jan 30 '16 at 00:28
@user3450277 - Here's a working version: https://jsfiddle.net/jfriend00/vnmh94zm/. I changed the design of the functions a bit to make more sense to me and slowed it down a bit just so I could see it better. You can hopefully see how this works and adapt to what you want. Just press start in my jsFiddle to see it run. I made it loop indefinitely until you hit Stop. – jfriend00 Jan 30 '16 at 00:53
The biggest thing wrong you were doing is you were not passing a function reference to `setInterval()`. You were executing your function immediately and passing the return value to `setInterval()`, thus you never got your interval working. – jfriend00 Jan 30 '16 at 00:55
Thank you! I think I understand what the issue was, now! – user3450277 Jan 30 '16 at 00:58

Javascript: Flexibility of function parameters?

1 Answers1