We Keep Coding

Numeric Separator breaking for string ID

Im relatively new to javascript. I have an ID
btnradio_-1-1_4_-1
for an input button but it is being read as a Numeric Separator and giving me the error
Uncaught SyntaxError: Numeric separators are not allowed at the end of numeric literals
The ID is coming from a Model which reads all other data fine in the context. The format of the ID is as it is for tracking dynamic values on a razor/jquery web page, so its prefered that the ID format doesn't change.
How can you read it as just a string and not a Numeric Separator variable? I need the ID to call in a getElementByID().
I tried storing it in a separate string variable, as well as converting it to a string then using it, but I get the same error.
EDIT: My javascript is embedded in a razor section if that is causing any conflicts. I am unsure if its relevant or not. It is also alongside some jQuery.
#section scripts {
<script>
...
document.getElementById(#Model.ItemIDs[3]).className += "btn-check:active";
...
</script>
}
EDIT: I had the wrong ID pasted in the question. It has been corrected and should make more sense than the last one in the context

How to check if array includes string in PUG template

I am using NodeJS with Express and the PUG view engine.
I am attempting to check if an array contains a certain string. I have tried the builtin javascript methods such as:
array.includes(str)
array.indexOf(str) > -1.
However neither of these options seem to work. How can I check if an array contains a certain string in PUG?
if example_array.length > 0
span() Array contains elements! // This works and appears on page
if example_array.includes('example string') // This does not work
span() Array includes example string! // This does not appear on page

If you want to run inline JS in your template you have to mark your code as unbuffered.
https://pugjs.org/language/code.html#unbuffered-code
if example_array.length > 0
span() Array contains elements!
- if (example_array.includes('example string'))
span() Array includes example string!
Note the "-" in front of the "if" on line 3.
Since this is a literal js expression now the parantheses are required aswell.

This kept me busy for hours so I wanted to share my own solution. While the answer is correct when checking for a string directly, remember you may need to add .toString() if you're checking from a variable:
- if (example_array.includes(myVariable.toString()))
Hopefully this saves someone some time!

not overriding css transform style using js?

I've got different elements each with a different transform property,
.one{transform: rotateY(10deg)}
.two{transform: rotateY(20deg)}
//etc.
and I'm tryng to add a translateZ (through javascript) to these transform properties.
As expected adding such a value automatically overrides the pre-existing property .
Is there an easy way to get this done?
(as a workaround I thought about using transform-origin but I'd rather avoid that if it's possible)

As long as you're trying to do it only once you could just concat those string like
newTransform = element.style.getPropertyValue("transform") + "translateZ(..px)"
If you're trying to do it multiple times you'd need to check and probably replace within your style-string if there's already a translateZ value.

xml2js, attribute name contains a hyphen

Using xml2js to parse an XML file, I need to retrieve the value of an attribute which contains a hyphen in its name
<item cdr-id="1234">
<name>some text</name>
</item>
At the point where I'm trying to retrieve cdr-id, I already have a variable item which points to the item element. I've verified it's pointing to the proper node with
console.log(item.name);
and that returns the expected value some text. But when I try
console.log(item.$.cdr-id);
I get the completely reasonable error ReferenceError: id is not defined (I'd have been more surprised if id wasn't treated as a separate token).
Likewise,
console.log(item.$."cdr-id");
gets the message SyntaxError: Unexpected string.
Throwing JSON.stringify around it
console.log( JSON.stringify(item.$));
reveals the original attribute name: {"cdr-id":"CDR0000040222"}
Not having hyphens in the name in the first place just kicks the problem down the road a bit. Failing that, it looks like providing a custom attribute name processor is the way to go, but that smacks of being "too clever" with potential for confusion if anyone ever has to update this code.
Is there a better way to do this?

do like
console.log(item.$["cdr-id"]);

Javascript reading multidimensional form

This has driven me "doo-lally" this afternoon!
A vendor (Zaxaa) uses a multi-dimentional form thus:
<form method="post" name="zaxaa" action="xxxx">
<input type="text" name="products[0][prod_name]" value="ABC">
<input type="text" name="products[0][prod_type]" id="pt" value="FRONTEND">
</form>
** This is my understanfing of how a multdimentional array is set up, and it seems to pass the variables to the server OK.
However, dependant on what other inputs are set to on the test form, the [prod_type] (and others) may need to change to "OTO" This is obviously going to be a javascript function, (but not the variant that starts with "$" on code lines ... whatever that type is!)
I have tried
document.zaxaa.products[0].prod_type.value
document.getElementById('products[0][prod_type]').value
document.getElementsByName('products[0][prod_type]').value
but in everycase, I get "products is not defined". (I have simplified the form as there are ten product[0] fields)
I've solved it... mainly a glaring error on my part. The getElementById worked fine ... except in my test script I'd used getElementById[xxx] and not getElementById(xxx)!! ie "[" rather than "(" Does help if you get the syntax right!
But I will take notice of those other methods, such as enclosing both array arguments in ["xxx"].

getElementById didn't work because the only one of those elements that has an id is the second input, with id="pt".
On any modern browser, you can use querySelector to get a list of the inputs using a CSS selector:
var nameInput = document.querySelector('input[name="products[0][prod_name]"]');
var typeInput = document.querySelector('input[name="products[0][prod_type]"]');
Then use their value property. So for instance, to set the name to "OTO":
document.querySelector('input[name="products[0][prod_name]"]').value = "OTO";
Use querySelectorAll if you need a list of relevant inputs, e.g.:
var nameInputs = document.querySelectorAll('input[name="products[0][prod_name]"]');
Then loop through them as needed (the list as a length, and you access elements via [n] where n is 0 to length - 1).
Re
* This is my understanfing of how a multdimentional array is set up...
All that HTML does is define input elements with a name property. That name property is sent to the server as-is, repeated as necessary if you have more than one field with that name. Anything turning them into an array for you is server-side, unrelated to JavaScript on the client. (The [0] is unusual, I'm used to seeing simply [], e.g name="products[][prod_name]".)

You can access it in this syntax:
document.zaxaa['products[0][prod_name]'].value

document.zaxaa.products[0].prod_type.value
The name is a single string, not making a nested structure to access the input. It would need to be
document.zaxaa["products[0][prod_type]"].value
// or better:
document.forms.zaxaa.elements["products[0][prod_type]"].value
The complicated name does only serve to parse the data into a (multidimensional) array on the server side, but all data will be sent "flattened".
document.getElementById('products[0][prod_type]').value
The id of your input is pt, so this should work as well:
document.getElementById("pt").value
document.getElementsByName('products[0][prod_type]').value
getElementsByName does return a collection of multiple elements - which does not have a .value property itself. Instead, access the first element in the collection (or iterate it completely):
document.getElementsByName('products[0][prod_type]')[0].value