We Keep Coding

Setting Variable Assignments with property display

I'm still a novice when it comes to JavaScript and was trying to make my code more cleaner and was wondering why the top scenario works but the bottom doesn't? Am I missing something?
var partner = document.getElementById('partner');
var providedBy = document.getElementById('providedBy');
partner.style.display = "none";
providedBy.style.display = "none";
But this does not?
var partner = document.getElementById('partner');
var providedBy = document.getElementById('providedBy');
collection = partner + providedBy;
collection.style.display = "none";
In the console it gives me error saying Cannot set Property 'display' of undefined. Am I supposed to define it somewhere first? I console logged the new variable and it returned both div elements.

collection is of type string as the + operator automatically call for both their toString() function.
Now what you are trying is to access a property of collection.style which does not exist because you are operating on a string. That's the reason for the error message you are getting.
You could do something like:
var collection = [];
collection.push(document.getElementById('partner'));
collection.push(document.getElementById('providedBy'));
collection.forEach(function(element) {
element.style.display = 'none';
}
which would be something I think you are trying to archive.

just to complement the accepted answer, I think you should understand why you get this error.
For what i understand from your code, you are trying to set the css of both variables partner and providedBy to display : none.
Your first piece of code works because you do this separately, while in your second code you try to add with the (+) operator both nodes, which evaluates to the string "[object HTMLDivElement][object HTMLInputElement]".
Then you try to call .style on that string which evaluates to undefined, and then you try to call display on that undefined value, this is where you get the error.
You could leave your code just like that since there are not too many variables, but if you wanted to do something that worked on multiple variables you could
create an array
push your objects into the array
create a function that loops over the elements of the array and set their style.display = "none" to individually.

In JavaScript you have to declare all of your variables. Secondly, you can't point to two objects at once by using the + operator. JavaScript interprets this as trying to concatenate the two objects, which it can't do in this way. It will return the string [object Object][object Object]
In order to affect two Objects at the same time you would need to create a function or use an existing method.

String Value from jQuery becomes undefined when passed as parameter

Good Day,
I am working on a pet project using NodeJS and Electron. It is basically a simple text editor at the moment. However I am running into an issue when trying to pass the value of a text-area to a function prior to saving to file.
Specifically when I call a function in another module, the value of the contents becomes 'undefined'. I suspect I am passing it incorrectly, or that it is being over-written between when I make the call and when the call executes, since strings are supposed to be passed by reference.
The code for the Renderer(index.html) is like this :
let otherModule = require('./js/otherModule.js');
let $ = require('jquery');
$('#btn_Save').on('click',() => {
// get the fileName, if empty propmt user with save dialog,
//log it to console for debugging
var contents = $('#txt_Content').val();
console.log('with:',contents.substring(0,9),'...');
var finalContents = contents; // (create a copy?)
if(//someConditionMet//)
{
var otherVar = $('#txt_Other').val();
console.log('Use:',otherVar.substring(0,9),'...');
finalContents = otherModule.someFunc(contents, otherVar);
}
//do something with final contents.
})// end of On-click
I have used console.log() to extensively evaluate the function and can confirm that up to the call to otherModule, the contents are correct, and match those in the textArea.It is once we are in the 'otherModule' that things go awry.
The code for the otherModule is like this:
const someFunc = function(contents, otherVar)
{
console.log('DoThings with:',contents.substring(0,9),'...');
// print shows the value to be undefined...
// do more things
console.log('Did stuff with otherVar:',otherVar.substring(0,9),'...');
// prints just fine as as expected.
// do more things
return someString;
}
module.exports = {
someFunc: someFunc
}
As mentioned in the comment, the very first line of the function logs the contents of the console, which displays the substring as 'undefined'.
Thank you for your time and your consideration!
// Extra context//
I have done some searching but beyond learning that strings are passed by reference and are immutable, I have not seen an answer to a question like this. There has been some discussion of closure issues, but usually in the context of events and callbacks, which I do not believe is the context here.
// Extra Information//
I have since found a solution to get my parameters to pass correctly. I have posted the answer below. I did two things:
1. Changed the function definition from 'const' to 'let'
2. Changed the order of the params, and removed the space following the comma.

If you get the value inside the if you should be fine.
if(//someConditionMet//)
{
var contents = $('#txt_Content').val(); //New line
var otherVar = $('#txt_Other').val();
console.log('Use:',otherVar.substring(0,9),'...');
finalContents = otherModule.someFunc(contents, otherVar);
}

I have found a solution to this problem. I am not certain why it makes a difference but I changed two things in 'otherModule'.
1. I changes the function from 'const' to 'let'
2. I changed the order of the parameters, removing the space after the comma
The new function header looks like:
let someFunc = function(otherVar,contents) {...}
I also updated the call to match the new order ( given):
finalContents = otherModule.someFunc(otherVar,contents);
I hope this helps someone in the future!

Setting Javascript Function Parameters inside the function parenthesis

This is so simple I forgot how to do it. I've always passed variables to a function hence it's param's were pre-set, now I need to set the param's when declaring the function, but don't remember the setup.
I'm looking for the working version of this:
function(a,b=4){return a-b;}
Where the b param' of the function is set when the function is declared.
If I remember rightly it's like setting a default for b if the function has no second argument:
function(a,b){b=b || 4; return a-b;}
EDIT
Thanks for all your help but it seems it's impossible in js without ECMAScript 6. Your answers are getting a bit off topic though... I really needed the values set in the paren's.
To keep it on topic... my initial problem is sending parameters to a setTimeout function. Ok so I have a <div> with a .gif background, when clicked it's background changes, this second animation runs for exactly 8 seconds and then the background changes again to a final .gif. so it's a 3 stage animation, simple... thing is the 8sec gap, I figured a setTimeout would work but I can't pass any param's to the 'sto' function to reference said <div>.
If you know of any timer events that can help then be my guest, this is as far as I've got. My original code is below... it fails at function(p = cha).
for(var i = 0; i < 5; i++){
var cha = document.createElement('div');
$(cha).css('background','url(img/stand.gif)');
cha.addEventListener('click',function(){
$(cha).css('background','url(img/walk.gif)');
setTimeout(function(p = cha){
$(p).css('background','url(img/walk.gif)');
},8000);
});
}

function(a,b){b=b || 4; return a-b;}
This is the typical way to default params in ES5. However I would advise changing this to check b's typs a little more strictly, because 0 will be considered a falsey value by the || operator
function(a,b){
b = typeof b === 'undefined' ? 4 : b;
return a-b;
}

IE6 alerting an array does not show anything

First of all, the full code is at work so I'm reciting from memory.
There is a js file with containing an object defined like this:
function SomeObject(someArg) {
this.someMember = someVar.split(".");
...
this.someFunc = function() {
return this.someMember;
}
...
}
There is another js file which uses this object and has a function that looks something like this:
someOtherFunc(SomeObject):
var someOtherVar = SomeObject.someFunc();
var length = someOtherVar.length;
....
Now when I add an alert(SomeObject.someFunc()) at the beginning of someOtherFunc all I see is an empty box. However, when I alert SomeObject.someFunc().length I get 1 (because the array has one element). Yet, I have a "length is an undefined..." where var length is defined. Also, when I alert SomeObject.someFunc()[0] I have the value of the element shown (it's a string).
I know it's IE6 (don't ask) and I couldn't provide much context, but I'm still hoping this issue is somewhat known or has some explanation or a workaround.

ExternalInterface.call() not getting return value

I have a Javascript function that returns the innerHTML of a div. I am attempting to call this function from Actionscript and store the return value. I know that the Javascript function is being called because there is an alert that displays the return data, The data that is returned to Actionscript, however, is null. I am not sure what is causing this. Here is a code example of what I am attempting to do:
Javascript:
function JSFunc () {
var x = document.getElementById("myDiv");
alert(x.innerHTML);
return x.innerHTML;
}
Actionscript:
import flash.external.*;
if (ExternalInterface.available) {
var retData:Object = ExternalInterface.call("JSFunc");
if(retData != null) {
textField.text = retData.toString();
} else {
textField.text = "Returned Null";
}
} else {
textField.text = "External Interface not available";
}
Like I said earlier, the alert shows up with the contents of the div but the text in the textfield is always "Returned Null", meaning that the ExternalInterface is available. I should add that I can only test this in IE7 and IE8. Any advice on what to do would be much appreciated.

This is a working sample based on the code you provided. You can right click it to view the source. I suspect the problem lies in the HTML for 'myDiv' or when you are making the actionscript call.

The source of the problem that I have been having has to do the object tag that I was using to embed the flash movie. I was using a tag that followed this example http://www.w3schools.com/flash/flash_inhtml.asp, I changed it to match this example: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_4150 and then I made sure that I added id to the object and everything worked.

Try adding as String to the call:
textField.text = ExternalInterface.call("JSFunc") as String;

I also noticed you got a typo in your code => textField != textfield

Try to get the object back from your external interface call without casting it first, and take a look at it in the debugger. If it is not a string, trying to cast it to a string will result in null. This should be a string, but it doesn't hurt to see what you are actually getting back before you try to work with it.

It seems to me that your problem is that from javascript you are returning a string, the innerHTML property of your myDiv element. In actionscript you have datatyped the variable that the ExternalInterface call returns to as an Object, but it is a String. Maybe you have already caught this, but I can't tell as you haven't amended your code.
//The following is an Object
var x = document.getElementById("myDiv");
/*
You are returning the innerHTML property of x, a string, but on the
flash end your expecting an object in your actionscript.
*/
return x.innerHTML;
//The following seems incorrect to me.
var retData:Object = ExternalInterface.call("JSFunc");
//Should be
var retData:String = ExternalInterface.call("JSFunc");
Hope this was helpful, take care.

You should use the import statement
import flash.external.*;