Develop Reference

Why is the output not returning the value?

Consider the HTML code below:
But when I enter some text the output is this:
Why is it not showing the name entered?
PS: I am an absolute beginner in JS. Please bear with me. Thank you!

That error is because you are printing the html element and not it's value.
To get the value use:
var name = document.getElementById('NAME').value;

Change the document.getElementById("NAME") to document.getElementById("NAME").value

Upate your function sayWelcome() with code:
function sayWelcome()
{
var name = document.getElementById('NAME').value;
alert("Welcome " + name+"!");
}

This because you didn't mention about the value of the field
Try this to solve the problem
var name = document.getElementById('NAME').value;

document.getElementById returns an HTMLElement - in your case HTMLInputElement object because a textbox is an input element. The value property can then be used to set or get the input of a specific input element.

Trying to replace a html attribute using a click function

I'm trying to take an a element and take the information from the data-id attribute and store it into a variable. I want to then splice this variable so I get the part that I need and implement it into another variable with some text. From that I then want to replace the src attribute of an iframe with the variable. Unfortunately, this doesn't seem to be working at all and I can't find the issue.
Here is the code:
$('.watchvideo').click(function(){
var idu = $(this).attr('data-id');
var id = "//www.youtube.com/embed/"idu.substr(27,37);
$('.videofeatem').setAttribute("src", id);
});

You have 2 issues in code:
1) concatenating substring
2) setting attribute via jquery
var id = "//www.youtube.com/embed/"+idu.substr(27,37);
$('.videofeatem').attr("src", id);

Without seeing the HTML, it's tough to be sure, but a + fixes the obvious problem:
$('.watchvideo').click(function(){
var idu = $(this).data('id');
var id = "//www.youtube.com/embed/" + idu.substr(27,37);
$('.videofeatem').attr("src", id);
});
Also, note that data-xxx attributes can be read by jQuery as .data('xxx')

Simply.
var id = "//www.youtube.com/embed/" + idu.substr(27,37);

Since you're using jQuery, use the .attr() method instead of the .setAttribute().

Replace element with text with javascript (no jquery)

I'm trying to create a link which has a dynamic value in it
http://my.link/index.php?action=huh&id=X
The X is what i want to replace dynamically with javascript variable.
I don't want to use jquery for it.
AND, i do not want to replace the whole url(href) because some part of URL needs to parsed by the template engine.
I think it'd be better if i inserted an element in place of X and replaced it with JS

only replace id
var elLink = document.getElementById("link");
elLink.href = elLink.href.replace(/id=(.*)/, function(){return "id=2"});
if id=X is constant
elLink.href = elLink.href.replace("id=X", "id=2");

You can use something like
document.getElementById("YourAnchorId").href= document.getElementById("YourAnchorId").href + id;
or
document.getElementById("YourAnchorId").href= document.getElementById("YourAnchorId").href +"?id" + id;
And that id variable get it from a textbox or however you need it.
And whats its the reason for not using jquery?

Set hidden input value with javascript

function GetWidth(){
var TBL_width = document.getElementById('wrap_tbl').offsetWidth;
return TBL_width;
}
var w = GetWidth();
<input type="hidden" id="tbl" value= w />
Is this possible?
I want to store a JavaScript variable in value attribute of a hidden input element. Please guide me how to do this

Jquery version:
$("#tbl").val(w);
Pure JavaScript version:
document.getElementById("tbl").value = w;
There is no difference between hidden and "unhidden" inputs in this case.
Advice: If your's GetWidth function has only one line, and the line isn't too much sophisticated, you can extract it from the method.
function setWidth(){
var TBL_width = document.getElementById('wrap_tbl').offsetWidth;
document.getElementById("tbl").value = TBL_width;
}

Use javascript to set the value property of your hidden element:
var w=GetWidth();
document.getElementById('tbl').value = w;
or jQuery-style:
var w=GetWidth();
$('#tbl').val(w);

This will definitely not work ... and you already realized that :-)
Look what you did with the element "wrap_tbl" ... you accessed it by using document.getElementById(). You can do the exact same thing to access hidden elements
document.getElementById('tbl').value = w;

You could set the value use javascript.
document.getElementById('tbl').value=w;
If you use jQuery, just $('#tbl').val(w);

As the value asignament to the input has already answered, one question,
Do you need it as a param to be sent on submit?
if not, one suggestion: you can allways use the jquery data method
$('body').data('myDesiredName','myDesiredValue');
and to retrieve it
alert($('body').data('myDeesiredName')); //will alert 'myDesiredValue'
this way you can allways store multiple values and variables without the need of hidden elements,
happy coding ;)

What is wrong with this code in jquery

I am trying to get plain text out of value stored in variable like this
var lb = $(this).attr("htmllabel");
var text = $(this).html(lb);
alert(text);
When the alert popup it give result as object[Object] but I was expecting the actual string after application of the function.
Can anyone help me in this? Thanks.

$(this).html(lb)
This line is setting the html of whatever this is to whatever is stored in lb. It then returns the jquery object for chaining purposes.
If you want the html of this then you just call $(this).html() with no parameter.

Your code on the second line is setting something not getting something ...
Can you include your HTML and the actual data you want in the alert box and this might help shape the answer

Take a look at the documentation for the html method:
http://api.jquery.com/html/#html2
As you can see from the documentation your code is setting the html for this and then returning a jQuery object. What is it that you want to display exactly?

If you're simply looking to get the value of your custom attribute "htmllabel", you can do the following:
var val = $(this).attr("htmllabel");
alter(val);
As a side note; I would suggest naming custom attributes with data-*according to the HTML5 spec like this:
<div data-htmllable></div>
Your can then access the value of the attribute in two ways (jQuery 1.4.3+):
var val1 = $(this).attr('data-htmllabel');
var val2 = $(this).data('htmllabel');
// Outputs same value //
alert(val1);
alert(val2);
I hope this helps!