JavaScript Variables in HTML Attributes

Javascript variables in HTML attributes

This should work:

<script>var screenWidth = screen.width;</script> 
...
<img src="images/title.png" onload="this.width=screenWidth;" style="margin-top: 3%">

How to assign javascript variable value to HTML Attribute?

Get length and set maxLength attribute.

function field_length(){
   var length = $("#Length").val();
  $("#Label").attr("maxlength", length)
}

How to set a JavaScript variable in attribute of a HTML tag

As far as I can see, your placement of i within that string results in i being outside the html className attribute, infact not inside any html attribute at all. Your code:

$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>');

would result in this final markup:

<li class = "collection-item"0>Hello</li>
<li class = "collection-item"1>Hello</li>

The zero has no HTML signficance and is out of place.

@sphinx's comment is the correct answer, but it is "not being fired" because his code results in each list item having a unique class name with its number at the end like so:

<li class = ".collection-item0">Hello</li>
<li class = ".collection-item1">Hello</li>

when you add the on hover action, you select these elements by the class ".collection-item", not a unique class.

Your solution would look like this:

$('.collection').append('<li class="collection-item '+j+'">'+ 'Hello'+'</li>');
$('.collection-item.'+j).attr("id",list[i].username);

and with this, in your final markup, each list item will have two classes - a shared "collection-item" class, and a numerical value like so:

<li class="collection-item 0"></li>
<li class="collection-item 1"></li>

now you can select each list item (in this example list item 4) by two classes with the selector $(".collection-item.4") as well as apply an action to all collection items with the selector $(".collection-item").

I find this code somewhat ugly looking and I'm not sure if I would be happy with it myself in terms of structure if it were mine, but here is a jsfiddle as a proof of concept :
https://jsfiddle.net/0wqeouxo/ (click on each list item and it will alert its id)

I think you could get more mileage out of jquery's functionality in that loop rather than defining classes inline.

How to Add javascript variable inside html attribute

Try this ,

var embedurl ="https://" + document.location.host + "/embed" + window.location.pathname;
document.getElementsByName("name")[0].value = embedurl; // here you need to set the input value
document.getElementById('landing2').submit();

How do I use this JavaScript variable in HTML?

You don't "use" JavaScript variables in HTML. HTML is not a programming language, it's a markup language, it just "describes" what the page should look like.

If you want to display a variable on the screen, this is done with JavaScript.

First, you need somewhere for it to write to:

<body>
    <p id="output"></p>
</body>

Then you need to update your JavaScript code to write to that <p> tag. Make sure you do so after the page is ready.

<script>
window.onload = function(){
    var name = prompt("What's your name?");
    var lengthOfName = name.length

    document.getElementById('output').innerHTML = lengthOfName;
};
</script>

window.onload = function() {  var name = prompt("What's your name?");  var lengthOfName = name.length
  document.getElementById('output').innerHTML = lengthOfName;};

<p id="output"></p>

set javascript variable using html attribute

A few notes:

getElementsByName returns a list of elements. That list doesn't have a style property (the entries on the list do).
ids must be unique, you can't put the same ID on multiple elements. Use a class to group elements together.
data-* attributes would probably be a better choice than name, since you can use them on any element type.
If you want to show/hide elements based on the radio button value, you'll need to select all of the elements you show/hide, not just the one matching the radio button's value. Then loop through that list, showing/hiding depending on whether they match the selected value.
The load event happens very late in the page load cycle (e.g., right at the end). Instead of using load, put your script tags at the very end of your document, just before the closing </body> tag, and do your event hook-up immediately.
I'd probably use a class to toggle visibility rather than style.display.
You can get the attribute from an element via getAttribute.
You can use querySelectorAll to get a list of elements matching any CSS selector. Use it on document to look globally, or on a specific element to only look within that element. For instance, to get a list of elements in the document with an attribute called data-val, you'd use the CSS selector [data-val], e.g. `document.querySelectorAll("[data-val]").

Here's a version of your snippet with some minimal updates; see comments:

// I'd use querySelectorAll rather than the old-style// forms and elements collections (but those work too)var radios = document.querySelectorAll("#picker input[type=radio]");// Initial value is 0, not [0]for (var i = 0; i < radios.length; i++) { // You were missing { on this line    // Recommend modern event handling, not onclick    radios[i].addEventListener("click", radioClicked);}
function radioClicked() {    var hidden = document.getElementById("hidden_elements");    hidden.classList.remove("hidden");    // Get all elements within it that have a data-val attribute    var list = hidden.querySelectorAll("[data-val]");    for (var i = 0; i < list.length; ++i) {        var el = list[i];        // Add/remove the hidden class depending on whether it matches        el.classList.toggle("hidden", el.getAttribute("data-val") != this.value);    }}

.hidden {  display: none;}

<form id="picker" method="post" action="">Item 1: <input type="radio" name="group1" value="one" />Item 2: <input type="radio" name="group1" value="two" />Item 3: <input type="radio" name="group1" value="three" /><br /><br /><!-- Hide this initially with markup rather than code --><div id="hidden_elements" class="hidden"><!-- Use data-val to identify them -->Input 1: <input type="text" data-val="one" />Input 2: <input type="text" data-val="two"  />Input 3: <input type="text" data-val="three"  /><br /><br /></div><input type="submit" id="submitbutton" value="Send form" /></form>

How To Use Javascript Variable In html attribute string

If you have the variable available, you should just use it in the method instead.

I don't have enough of your code really to go on but something like this.

function OpenRadWindow(url, x) { 
   var id = "<%= this.id %>";
   url = url + id;
   ... then your code here
}

Then for your OnClientClick

OnClientClick="return OpenRadWindow('ImportSDS.aspx?id=', 'RWImport');"

JavaScript Variables in HTML Attributes