We Keep Coding

document.getElementById() keeps returning NULL - how to find value

I am using one of those vulnerable practice sites on Kali Linux and when I inspected the source page I noticed the following variable var pathName = document.getElementById("path") The value of pathName is hidden and it is up to me to find it as these sites are there for people to practice their ethical hack skills
So in the Chrome Web Browser console, I type in document.getElementById("path").value but I keep getting return null. I don't understand why, like do I need to do like window.ontop?
Any help would be great!

Make you sure you have an input in DOM with id="path" attribute value.
For example -
<input id="path">
If that is not present in the DOM then getElementById will always return null.
You can open Chrome-Dev Tool and search this #path in Elements tab. That should highlight that input, if it is not then you are targeting wrong element.

If document.getElementById("path").value returns null, your element was found. It might not be an input element, so might not contain a value field.
Try typing JSON.stringify(document.getElementById("path")) into the console to inspect the object.
Also try document.getElementById("path").outerHTML to see the attributes and children.
Or just document.getElementById("path") and open the tree to view the internals.

Update boostrap input externally with jQuery isn't showing

I've tried:
$(element).attr("value", newValue);
which changed the value when I inspect the element but it doesn't show when I look at the actual input. I've then tried to .trigger different stuff but it doesn't work. (I've also tried $(element).val(newValue)).
EDIT: Found the error, I imported an obj from the server in JSON format. When I parsed it, the property I wanted to use didn't work as expected in the val function. Only sometimes it worked. To fix it I, when parsing it, used eval() on the object property.

Try using jQuery's .val() method:
$(element).val(newValue);
Bootstrap should not be making any difference here.
Always check what you are passing to the val() (or any other) function and what that function expects as parameter, especially when using a specific unit or doing some calculations which might end up being string concatenations instead.
jQuery("input").val(456);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input"></label>
<input type="text" class="form-control" id="elementID" placeholder="..." value="123">

How to take result text when text-overflow property is applied

I have a div with css property text-overflow : ellipsis to add ellipsis and show the text in a single line.
When I perform jquery .text() or .html(), I get the full string, but I need the exact text displaying in the div currently (not the full string).
Can some one guide me how to take the exact displaying string using jquery or JS?
Actual String = "abcdefghijklmnop"
Due to CSS, the div displays "abcd..."
My expected result (using jQuery or JS) "abcd..."

This is not possible without trying to mimic CSS and recreate the strings with the ellipsis using JS.
The reason for this is that CSS only manipulates what is displayed to the user, not the HTML source itself. You can verify this by checking the source code for your document. This means that when you use .text() or .html() you get the values from the DOM, rather than what is displayed via the CSS filter.
There are a couple of hacks that does a pretty good job, but it is still no guarantee that the JS correctly mimics how CSS renders the text.

If you know the number of values you need every time then you can just use JS Like for example if it was always 4 values that gets entered in than it would be like this,
JS Fiddle
form
<form action="" method="post">
<p>
<label for="txt">My txt: </albel>
<input type="text" id="myTxt"><br />
<input type="submit" id="submitButton" value="Send">
</P>
</form>
js
document.getElementById('submitButton').onclick = function() {
myVariable = document.getElementById("myTxt").value;
alert(myVariable.slice(0, 4));
};
No matter what is typed in to the textbox it will be sliced to the first 4 characters.

How do I pull a value from an object #nodelist

I have a javascript that I am trying to write to do a comparison with a list of objects. But first I need to pull the value from the below HTML.
<div class="no_icon" style="width:100%;display:-moz-deck;">
<input title="model1" onfocus="thtmlbSaveKeyboardFocus('product_type');" class="class1"
style="width:100%;" dir="ltr" name="product_type" id="product_type" maxlength="40"
onkeydown="if(htmlbEnterKey(event)==true){return
htmlbSL(this,2,'product_type:submitonenter','0')};" value="model1" disabled="disabled"></div>
my issue happens when I try to pull the information I need from the page. I have tried several versions of the "document.getElement" commands,(TagName,ID,Class) but I cannot seem to pull the information i need.
When I tried to see if i could even access the input I received either a null or undefined return. but when I do a
var test=document.getElementsByTagName(product_type.class1");
console.log(test);
I get a return of object# nodelist
After doing some digging into nodelists I have discovered that "product_type.class1" has an attribute of namedNodeMap. But nothing i seem to do can pull the value section from within the HTML.
What I need is a way to get the value of the "value="field.

I think you will have more success using querySelector instead of getElementsByTagName:
var input = document.querySelector("[name='product_type']");
console.log(input.value);

javascript not getting value of input box

I seem to be having trouble with passing the value of an input box to anything else in my javascript.
It's not producing any errors - and I remember reading somewhere that you can have issues if the document hasn't finished loading - but I'm pretty sure it has!
The code in question is as follows in the javascript:
var address = getElementById(addyInput).value;
document.getElementById('add').innerHTML = address;
And in the HTML
<form>
<input name="addyInput" placeholder="Don't forget postcode!">
</form>
<button id="start" onclick="initialize()">Start!</button>
<p>Address Test
<div id="add"></div>
</p>
I know that the button itself is working as it fires the rest of my code fine without the offending code - however the moment I uncomment that little block at the top, it just does nothing. (no errors etc)
Any help on that one would be hot! Thanks :)
Update:
I now have it working! Thanks muchly for all the help!!

Your form needs to look like this (add an id attribute):
<form>
<input id="addyInput" name="addyInput" placeholder="Don't forget postcode!">
</form>
And the first line of Javascript needs to look like this (since getElementById is expecting an ID rather than a name).
var address = getElementById('addyInput').value;
Additionally, getElementById expects the id argument to be a string (hence the quotes). If you pass it addyInput without quotes, it'll try to interpret addyInput as a variable which has a value of undefined and you won't get back the DOM element you want.
Or, if you were using jQuery, you could leave the form markup as-is and change the Javascript to this:
var address = $('input[name=addyInput]').val();

Make sure to specify and id on the input. You only have a name.

You need to add the id "addyInput" to your form input rather than just the name.

getElementById expects a string.
var address = getElementById('addyInput').value;
If you put this directly into a script section in the head, then you will have a problem because the page is not loaded completely but the code is executed already.
And of course you should define an id for the input element as the others already said.

what you are getting is an array, you need to fetch your array into some readable data. Try something like:
$value = array_shift( $yourarray );
or if it's a multi value array you can just loop it to fetch out the values.