We Keep Coding

JS file won't let me have more than two variables

I am a newbie at JS, and am trying to make my own Chrome extension with some source-free code I found on the internet. I am still learning and playing around, so some stuff is new or unknown to me, and therefore I ran into this little error. Tried to create an extension, which changes font on two Twitter accounts but when I try to add more than two Twitter accounts, Chrome states there was an error in one of the lines.
I have this code, which works perfectly:
if (link && (link.href === "https://twitter.com/Handle1" ||
link.href === "https://twitter.com/Handle2")) {
If I add one, two or more handles in this part, Chrome doesn't return any errors, which I know why and it's great. It also doesn't return it in this part, if I have only two handles, like shown here:
if (tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle1/") === 0 ||
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle2/") === 0) {
But it returns an error, when I try to add another handle, like here:
if (tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle1/") === 0 ||
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle2/") === 0) ||
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle3/") === 0) {
Chrome says it's because of an "Unexpected token ||" but I don't know why. If it accepts two handles, and the operator is "OR", why it doesn't accept three or more handles?

syntax error, one more ) before ||.
if (
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle1/") ===
0 ||
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle2/") ===
0 ||
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle3/") === 0
) {
}
Actually, your code can be simplified to below which might help you find where the bug is.
var clickToOpenTarget = tweet.dataset.clickToOpenTarget;
var hrefs = [
"https://twitter.com/Handle1/",
"https://twitter.com/Handle2/",
"https://twitter.com/Handle3/",
];
var hasClickToOpenTarget = hrefs.some(function (href) {
return clickToOpenTarget.indexOf(href) === 0;
});
if (clickToOpenTarget) {
console.log("hello");
}
Also, eslint or prettier is recommended to help you find these errors.

If you reformat the problematic segment, it looks like this:
if (tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle1/") === 0 ||
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle2/") === 0) ||
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle3/") === 0) {
However, in the second line, you can see that there's an extra ), which tells the JavaScript interpreter that the if statement has ended, so it throws an error when it sees an unexpected || immediately after the if statement.
I assume it was just a simple syntax mistake when you tried to add another clause to your if-statement. Removing this extra ) fixes the problem:
if (tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle1/") === 0 ||
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle2/") === 0 ||
tweet.dataset.clickToOpenTarget.indexOf("https://twitter.com/Handle3/") === 0) {

How to combine two value checks into one line in javascript

I have the following code in javascript:
var seasonDropdown = TVContainer.find('select.season').val()
if (seasonDropdown == "-1" || !seasonDropdown) {seasonDropdown = null}
Is there a way to combine these two into one line?

You could do the following:
var seasonDropdown = (TVContainer.find('select.season').val() == "-1" || !TVContainer.find('select.season').val()) ? null : TVContainer.find('select.season').val();
But honestly, you should prefer readability over a solution like this.
if you want a bit cleaner look instead, you could use this:
var seasonDropdown = TVContainer.find('select.season').val();
if (seasonDropdown == "-1" || !seasonDropdown) seasonDropdown = null;

Better way to do this via pure javascript

if(window.location.href.indexOf("=38805") > -1
|| window.location.href.indexOf("=38807") > -1
|| window.location.href.indexOf("=38816") > -1
|| window.location.href.indexOf("=38815") > -1
|| window.location.href.indexOf("=38814") > -1
|| window.location.href.indexOf("=38813") > -1
|| window.location.href.indexOf("=38811") > -1
){
do something
}
Basically, I am using a separate css for the pages that contain these strings. I might over 50 pages. Wondering if there is a cleaner way to write this. Put them into an array?

JS some function, is exactly for stuff like that:
let options = ["=38805","=38807","=38816"]; //...and the others
let link = window.location.href;
if( options.some( option => link.includes(option))){
console.log('yay! =)');
}
You're actually going through your array of options, and asking a question about each of the elements in the array : "Are you present at my URL?".
Then, the some method will return true (and in this case- active the if statment ) only if one or more elements in the options array is answering true to your includes question.
And by the way-
JS have another method that cover a similar set of mind. the every metohd.
This method, as you can understand by its name, will return true only if all the elements in the array is answering true to your question.

How about something like this to clean it up a bit:
const ids = [38805, 38807, 38811, 38813, 38814, 38815, 38816];
let windowHrefHasId = false;
for (let id of ids) {
if (window.location.href.indexOf('=' + id.toString()) > -1) {
windowHrefHasId = true;
break;
}
}
if (windowHrefHasId) {
// do something
}

simplify javascript if statement where conditions are identical except for variable

I apologize if this is a duplicate question. It's such a use-case question that it seems everyone has their own version.
I'm wondering if this can be simplified:
if ($('.taxclass').text().indexOf(tax1)>-1 || $('.taxclass').text().indexOf(tax2)>-1) {}

It's pretty simple as it stands, but you could make it a bit less redundant mainly by getting the elements text only once and reusing the variable:
var text = $('.taxclass').text();
if (text.indexOf(tax1)>-1 || text.indexOf(tax2)>-1) {
}
A further note could be to reduce the traversal of the DOM by using an identifier and looking only for a distinct element (if that suits your needs) instead of every possible thing that has the class taxclass.

var txt = $('.taxclass').text();
if (txt.indexOf(tax1)>-1 || txt.indexOf(tax2)>-1) {}

One super quick way would be not to duplicate $('.taxclass').text()
Try something like
var tax = $('.taxclass').text();
if (tax.indexOf(tax1)>-1 || tax.indexOf(tax2)>-1) {}

You can store $('.taxclass').text() in a variable, or use regex.
var str = $('.taxclass').text();
if (str.indexOf(tax1) > -1 || str.indexOf(tax2) > -1)
// Or with regex
if(/(text1)|(text2)/.test($('.taxclass').text())
{}

Quick and dirty:
text.indexOf(tax1+"~"+tax2)>-1
Functional, works on n strings, but verbose:
[tax1, tax2].some(function(s) { return s.indexOf(text)>-1 })
As a prototype:
String.prototype.foundIn = function() {
var s=this; return Array.prototype.slice.call(arguments).some(function(m)
{return m.indexOf(s)>-1});
};
Usage:
$('.taxclass').text().foundIn(tax1, tax2)

What about:
f = function (x) { return $('.taxclass').text().indexOf(x) > -1; }
if (f(tax1) || f(tax2)) {}

reading optional attributes from optional setting in javascript

What is the most efficient way of reading optional attributes in an optional setting argument. I'm using something like:
f = func(var1, optionalsettings) {
var2 = (optionalsettings === undefined ? 0
: (optionalsettings['var2'] == null ? 0 : optionalsettings['var2']));
};
But I've the feeling it can be done more efficiently, either in javascript or in jquery.

You could do:
var var2 = (optionalsettings && optionalsettings['var2']) || 0;
First you check is optionalsettings exists. If it does, you try to return optionalsettings['var2']. If that fails, you fall back on the default value.

also possible jquery's extend:
function myTest(arg1, arg2, optionalsettings) {
var settings = $.extend( {
opt1 : val1
, opt2 : val2}, optionalsettings || {})
...