Develop Reference

How to put JS var as part of an Element's attribute, using JS

I'm new to coding, and as a learning experience I've decided to make a little project.
I'm trying to modify an element's CSS style using JS, but i'm struggling with putting a JS variable as part of one of the arguments:
document.getElementById("squareContainer").setAttribute('"style","width:'+gridWidth+'*30 px"');
squareContainer is a div, and gridWidth is a JS variable with a value of a natural number larger than 0.
The goal is to set squareContainer's width attribute to be gridWidth*30 pixels wide, but console shows this error:
Uncaught TypeError: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present.
at life.html:33
I know it's because of the way I put single- and double-quotes in there, but I have no idea how to actually fix it. I've tried many combinations, but they don't work.

You seem to be passing just a single value to the setAttribute function. To fix this issue, you will have to get rid of the outer single quotes.
document.getElementById("squareContainer").setAttribute("style", "width:" + gridWidth * 30 + "px");
BONUS TIP:
As a better and clean alternative to string concatenation, you may use template strings for string interpolation, i.e., embedding a JS variable inside a string. Template strings use a backtick character (`) instead of usual quotation marks (' or "). You can rewrite the above line of code using template string as such:
document.getElementById("squareContainer").setAttribute("style", `width: ${gridWidth * 30}px`);

You are only passing only one value. Please try the below
document.getElementById("squareContainer").setAttribute("style","width:" + gridWidth * 30 + "px");
if you would like to use ES6
```js
document.getElementById("squareContainer").setAttribute("style",`width: ${gridWidth * 30}px`);
For more information
https://www.w3schools.com/jsref/met_element_setattribute.asp
https://www.w3schools.com/jsref/prop_html_style.asp

String variables inside .css() method don't seem to work

I am new to this so this could potentially be more simple than I think, but I am puzzled by this issue.
I can use number variables in .css() no issue, but a string doesn't appear to work. When testing, it simply won't do anything. Is there another way to do this?
var align = "center";
$this.css({'background-position': align + ' ' + -bgY + 'px'})
Simplified, but this is what I am doing. align is the variable in question, where it would actually act as a parameter you can set elsewhere rather than just typing center in there or so. I have checked and the align variable itself is the correct value when trying.

You can try formatting string:
var align = "center";
$this.css({'background-position': `${align}`});
Basically, everything you write between curly brackets in string with `` is js code.

Adding JavaScript Function with arguments to an element from code behind

Hi Guys I've been dealing with an estrange thing while trying to pass string parameters to a JavaScript function from code behind, this is what I have actually in code behind which is wrong:
thumbnail = "<a href = 'javascript:RemovePirctureDetail(" + field1 + ",'" + tempname + "');' class='label label-default' rel='tooltip'>Remove</a>";
So this is the bad result I'm getting in the browser:
Remove
Meas that for some reason when I try to pass the string parameter, the html comes out bad formatted. The result should looks like this:
Remove
I tried already send the quotation marks like this /' from code behind, it did not work neither. How can I achieve this?
Thanks.

string thumbnail = "Remove";`
You need to use \ to escape the quotes inside, not /..

With javascript attribute I wouldn't use single quote, because it could be messy
Try to change in this way:
thumbnail = "Remove";
PS: Actually, I would NEVER use single quotes with attributes, it will cause an HTML validation error, HTML is not well formed with single quotes for attributes (although with inspection tools you see double quotes.. because inspection tools have the need to work with a well formed HTML, so if you want to see the real HTML of your page, view the source code (generally the option is on right-click on the page)

How to find an ID that contains a string if the string is held inside a variable?

This may be a very simple question in syntax but I've been googling and still can't find the answer.
I'm trying to set focus to the first SELECT element which has a specific string but the string is held in a dynamic variable. What would be the correct syntax? I thought the below would be correct but it doesn't seem to work.
$('SELECT[id*=" + qID"]').focus();

Try this
$('select[id*="' + qID + '"]').focus();

Using a variable when traversing elements in JQuery

Very quick and hopefully simple question.
I am trying to select a hidden input by value with some predefined variable.
var id = $("#puid").val();
$('input[value=id]').closest('tr').css({'background-color':'red'});
I thought the above code would have worked, however its not processing id as a variable. What is the right notation to do this? (I have tested the code by replacing id with the actual number and the rest of the code works fine).

remove it from the quotes, so the variable is concatenated into the string. They way you have it, it's looking for the literal value "id", and has no way of knowing that you're talking about a variable.
$('input[value='+id+']')
edit: more info - you could put double quotes around the id part, inside the strings, as in Nick's answer, which would make it safe to use with non-numeric ids. I omitted them since your example doesn't need them, as you said your ids are numeric.

Concatenate the string selector with the variable, like this:
var id = $("#puid").val();
$('input[value="' + id + '"]').closest('tr').css({'background-color':'red'});
Currently, it's looking exactly for this: value="id", but you want your variable there.