We Keep Coding

document.getElementById("numbern").value causes Uncaught TypeError: Cannot read property 'value' of undefined

I'm trying to get value from the input box. The id is correct and input is shown.
In console it shows an
UncaughtTypeError Uncaught TypeError: Cannot read property 'value' of undefined and links to line 41 but all is correct as I think.
HTML
<input id="numbern" name="nub" placeholder="Your Roll No." class="form-control col-6" autocomplete="off">
Javascript
docsd=document.getElementById('numbern');
console.log(docsd.value);
Can I know what I'm doing wrong?

Make sure that the element exists in DOM before you call your selector. document.ready can be used to wait for the document object to load first. Following snippet works fine:
function getValue() {
docsd = document.getElementById('numbern');
console.log(docsd.value);
};
document.addEventListener('DOMContentLoaded', getValue(), false);
<input id="numbern" name="nub" placeholder="Your Roll No." class="form-control col-6" value="10" autocomplete="off">

Use this Code it will listen to event after you change the value in input box it will execute the console.log
`let docsd=document.getElementById('numbern');
docsd.addEventListener("input",()=>{
console.log(docsd.value);
})`

Because my reputation doesn’t allow me to comment, I have to say it here. I have encountered the similar situation when I try to use jquery to manually add an element to the DOM. So as #CBroe suggested, please find out when your js is executed and the element is definitely not there.
You can use F12 button to open the google console to check whether element is there:
Hope it helps you to find your way out. I can't find any problem in this code snippet so it is more likely related to how you render your html and its happening time compared to the js execution time.
-----update-------
Based on your code in fiddle, you should definitely move the script down like behind the DOM body
---------Test---------
As you can see, I have tested on my google browser and it works. I can get the element and manipulate it and there is not error after I comment the getElementById("numbern") in the top script.

JS Calculator: Unobtrusive Alternative to onlick

I have my current html setup with inline js. This includes a that has inputs such as:
<input type="button" value="7" onclick="appendSymbol(value)" />
I've researched unobtrusive js and have even got as far as [object mouseclick] appearing in my results window when a button is clicked. I need an unobtrusive way to have the value entered into my appendSymbol function.
Here is the calculator with obtrusive js.
I'm not looking for entire snippets, just advice or a point of reference.

You just need a click handler to run after the input is loaded.
If you're using a framework such as jquery, this becomes very easy:
$("input").click(function(e){
appendSymbol($(this).val());
});
If you're not, you can do the same in plain javascript with:
element.addEventListener('click', function() { ... }, false);

Pass Value of Input Automatically With Javascript

I was working on passing a value that is put into a text input box, to another text input box as the user types.
I got everything to work on jsfiddle but for some reason I can't get it to work if I use it anywhere else. Im using pure javascript, not jquery.
So, here is my html code
<input id="imput1" type="text" class="firstbox">
<p>Box to Retrieve The Input</p>
<br />
<input id="gift_card_recipient" type="text" class="replica" value="box1" />
<input type="text" class="replica2" value="box2" />
And the Javascript that I am using to pass the value as the user types, from the first box, to the second box:
(function() {
var var1 = document.getElementById('imput1'),
var2 = document.getElementById('gift_card_recipient'),
callback = function () {
var2.value = this.value;
};
if (var1.addEventListener) {
var1.addEventListener('keyup', callback);
} else {
var1.attachEvent('onkeyup', callback);
}
}());
Again, I got this to work on jsfiddle, and here is a demo of what it looks like, but for some reason, if I use it on my pc on a html file, or on my server, it wont work.
I am linking the js file in the header, and also inspected it in chrome. here is the error I got from chrome:
Uncaught TypeError: Cannot read property 'addEventListener' of null
Not really sure why its throwing that. but here is my jsfiddle that I have that actually works. but doesn't on the server or my pc: http://jsfiddle.net/C3SPM/

Include your script block at the end of the body (or after the elements in question). Or wrap your code in an onload/onDomReady handler.
The specific error you are getting is because your code is running before the elements in question have been parsed, which means that document.getElementById('imput1') returns null because it can't find the element. The reason it works in a fiddle is that by default jsfiddle wraps any JS in an onload handler, so then when the code runs the elements have been parsed (you can change this setting in jsfiddle using the drop-down on the left under "Frameworks & Extensions").

Javascript automate onclick

I'm trying to automate clicking a few links on a webpage
For example, in Google Chrome if I type Javascript:setDisplayType('source'); then it runs the function in the html defined as
<input type="radio" name="DisplayType" value="source"
onclick="setDisplayType('source');">
So far so good. However, I'm unsure about how to do the same with the following
<td id="4124321351_U923" class="o bgc b" onclick="s(this,'329803656','40745906','9/2');b(this,'5.5','5.5');">5.5</td>
I've tried the following without success
Javascript:s(this,'329803656','40745906','9/2');
Javascript:b(this,'5.5','5.5');
Javascript:s(this,'329803656','40745906','9/2');b(this,'5.5','5.5');
Please can someone explain why it's not working and how to fire this onclick event using a similar method?

if you're not using JQuery or similar, then something like:
document.getElementById("4124321351_U923").click();
might work. In short, your examples above don't work because the 'this' magic variable needs to be initialised to point to the link being clicked. You could either try to initiate a click event on the element (as per my example) or you could manually grab a reference to the link, and pass that in instead of this

Problem is with this argument because it's not called from the element and you called it outside.
Javascript:s(this,'329803656','40745906','9/2');
Try proving a proper argument like this,
Javascript:s(document.getElementById('4124321351_U923'),'329803656','40745906','9/2');

How to insert text into a form with JavaScript

I'm trying to create a simple extension for personal use. It's partially from laziness, and partially from an urge to learn. I've never made extensions before, but I've been looking at the documentation. Now I just need to write the code. What I'm trying to do, is when the browser loads a certain page, to insert text into a specific form. The form is as follows
<div id="set_tags" class="advanced_option">
<label for="post_tags" class="inline_input_label" id="post_tags_label"
onclick="Element.remove($(this))"
style="left:8px; right:auto; text-align:left">tags</label>
<input id="post_tags" name="post[tags]" type="text"/>
</div>
I haven't worked much with javascript, so is there a way to add the text "Music" to this when the page is loaded?

You can use the onload function to start your function.
http://javascript.about.com/library/blonload.htm
Since you are new to javascript you may want to get familiar with unobtrusive javascript (http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html) which I find is a better way to write javascript, as you can then easily comment out javascript and see how it works when that is disabled. But, it would be easier to learn this in the beginning.
To get the input tag you can use document.getElementById() which would be something like:
var elem = document.getElementById('post_tags');
Then, to add text to this field there should be a value property in your input definition above, and you would just do:
elem.value = "Music";

document.getElementById("post_tags_label").appendChild(
document.createTextNode("Music"));
I'm assuming that you want to put it at the end of the element post_tags_label.

This is really easy to do if you use GreaseMonkey. It's perfect for personal changes you want to make to web pages, etc.