getElementById returns NaN - javascript

Consider the following example snippet of my code. I have tried parseInt with no luck. Here, I want javascript to set a number in a cell PICweight then retrieve it later and place it in a different cell totalcabin. You can see here, I want to set the number as 1, but when the code runs, it returns NaN in totalcabin.
<td id="PICweight" type="tel"></td>
<script>
window.onchange = function setfields() {
document.getElementById("PICweight").innerHTML = 1;
var PICweight = document.getElementById("PICweight").value;
var totalcabin = document.getElementById("totalcabin");
totalcabin.innerHTML = +PICweight
}
</script>

There is no value property of td elements. When you use .value on normal html elements (non input elements) you end up with undefined. Later, you use + to implicitly cast undefined to a number, which results in NaN and your subsequent observation.
You should be using .textContent instead of value to get the text inside of the td element.
var PICweight = document.getElementById("PICweight").textContent;

Related

Why am I not getting the content of this element when I call it by its ID?

I want to limit how long a string is when updated by JS. To do so, I want to use a loop that checks the length of the current string and only accepts new inputs if the string is shorter than the maximum length.
For some reason when I ask for the length of the html element, it returns the... nature of the element?
This specifically: [object HTMLParagraphElement]
This is how I'm getting the html element:
const digits = document.getElementById("digits");
This is how I'm trying to limit the size, I marked which line I'm currently using to add numbers (it works on its own, I just want to limit how long the string can be):
addEventListenerList(numeral, "click", () => {
if (digits.toString().length > 10){ //(*)
return null;
} else {
digits.innerText += event.target.value; //This is the line that adds numbers.
}
});
So yeah, it's not working because line (*) is finding the current length to be 29 (the length of [object HTMLParagraphElement]). I have no idea how to get the length of the content, and not this... what is this exactly?
I don't know if it's useful, but just in case, numeral is a node list that I iterate through using this:
function addEventListenerList(list, event, fn){
for (let i = 0, len = list.length; i < len; i++) {
list[i].addEventListener(event, fn);
}
}
The most direct way to solve this is to use digits.textContent.length > 10 instead of digits.toString(). However, as others have noted, digits.value.length and/or digits.innerHTML.length may be relevant in some cases.
innerHTML is less desirable here because nested html objects or formatting tags like or will count as part of the calculated length. It also uses more memory than .textContent. See innerText vs innerHtml vs label vs text vs textContent vs outerText for a longer discussion on the differences.
You assigned the element to variable not its contents, to get the length of the contents depends on what element type it is.
If it is a input then you can get the value:
digits.value.length
If it is another type you can use the innerHTML property:
digits.innerHTML.length

jQuery length returns 1 when element assigned to variable

Why does this happen? When I reference the element directly I get the expected result. When I assign the element to a variable the result is always 1.
When I write the code like this the result is always 1:
$dynamicNode = $(".dynamic");
$deleteNode = $(".trash");
$deleteNode.click(function(){
$count = $dynamicNode.length;
console.log($count);
});
When I write the code like this the result is the actual number of elements with class .dynamic.
$deleteNode = $(".trash");
$deleteNode.click(function(){
$count = $(".dynamic").length;
console.log($count);
});
The difference is due to the point at which the variables are defined. In the first example you get the elements when the page loads, so the length will always be the same in later click events.
In the second example you get the length at the point the button was clicked, hence it's always up to date with the state of the DOM.

set empty text inputs to zero with javascript

I'm sure this is basic stuff but I'd like any text input that's left blank to have a value of zero so it can still be included in a function and not mess with the final sum of the equation.
At the moment I'm just setting <input type="text" id="id" value="0"> since nothing will be divided by a var value = document.getElementById("id"); but I don't want to see the zeros in the text boxes.
Is there an better way to not include empty inputs in an equation?
You can use the || operator along with a default value to exclude empty text boxes (or none existent ones) all in one line:
var value = document.getElementById("id").value || "0";
Or, if you want an integer value (since it looks like you're going to do calculations):
var value = +document.getElementById("id").value || 0;
Dont set the value on the input. Don't use a placeholder either it will show in the input.
var value = document.getElementById("id").value;
if (value !== "") {
//use it here
}
Since you're searching for a numeric value to be used in a equation, you can just do all the calculations internally to avoid displaying those values in the inputs, for example:
var value = parseInt(document.getElementById("id"));
if(isNaN(value)){
value = 0;
}
You just first parse the result to int (or float, any type that works for you), then you verify if it's a valid number, and if not, then you just assign it a value of zero. That way you can use it in your equation and you will not need to display that zero in the input.

value from span to input

I have value that is displayed in span tag. If i want to post the value i have to assign that value to an input. So this is the code i have written to assign value to input and trying to post that value. But when i alert the assigned value its
showing as
[object Object]
Pls check the code and correct me.
var value = $("#spanElement").text();
var lower=$("#inputElement").val(value);
alert(lower);
and i tried this also
var value = $("#spanElement").text();
var lower=$("#inputElement").val(value);
alert(lower);
Both the above code shows
[object Object]
Because of this i am not able to post values.
That is because the value setter function on an input return the jQuery object of that input element only, it allows you to chain the event.
Try this
var value = $("#spanElement").text();
var lower=$("#inputElement").val(value);
alert(lower.val());
Read more about it here http://api.jquery.com/val/#val-value
"lower" is an object. if you want to see the text inside, you need to call lower.val().
e.g.
var value = $("#spanElement").text();
var lower=$("#inputElement").val(value);
alert(lower.val());
jQuery supports chaining objects return.
So, whenever you do an operation on an object (except some like .val() getter, it returns object of that selector element.
So, you can do much more operations in a single statement.
In your statement,
var lower=$("#inputElement").val(value);
alert(lower);,
It is returning the object of element #lower.
You can add more operations to it.
For example:
var lower=$("#inputElement").val(value).css('color', 'red');
You want only plain value.
So, rather you should do this:
var value = $("#spanElement").text();
$("#inputElement").val(value);
var lower=$("#inputElement").val();
alert(lower);
Just do in this way..
var span_text = $("#spanElement").text(); //get span text
$("#inputElement").val(span_text); //set span text to input value
var input_value = $("#inputElement").val(); //get input value
alert(input_value); //alert input value
Hope this will help
This is because it will return a jQuery object . If you want to see the same text which is in the input you can either use .val() like answered previously or use like this
var value = $("#spanElement").text();
var lower=$("#inputElement").val(value);
alert($("#spanElement").prop('innerHTML'));
WORKING DEMO
You are getting 'Object Object' because lower is an object if you want to get the text you need to perform below actions.
var value = $("#spanElement").text();
var lower=$("#inputElement").val(value);
alert(lower.val());
Or
var value = $("#spanElement").text();
var lower=$("#inputElement").val(value);
alert(lower.val());
Hope it helps !

Send value of text box to jquery function

I have a textbox and need to send the value of the text box when you type some number and the radio button is checked, to a jquery function. The code I'm using now is:
var radiobuttoncustom = 0;
if (document.getElementById('radiobuttoncustom').checked) {
radiobuttoncustom = document.getElementsByName("some_number").value;
}
I will then display the results using "radiobuttoncustom" but when the results is displayed it is NaN instead of the number. Right now I'm using the textboxes name to get the value.
getElementsByName returns an HTMLCollection, not an element, which would not have a value attribute.
Have you tried:
radiobuttoncustom = document.getElementsByName("some_number")[0].value;
edit: if you are dealing with numbers, you should also parse them as such:
radiobuttoncustom = parseInt(document.getElementsByName("some_number")[0].value, 10);
Since you are using jquery, why not
$('input[name=some_number]').val();
and
if($('#radiobuttoncustom').prop("checked"))

Categories