Cannot get the number of var using javascript

Question

I have this certain problem where I cannot get the number value of 'currentStock' var data inside an HTML file using JavaScript. I have this on my HTML file in script tag:

By the way, due to the HTML being too large, and also it was not originally my script, but from a friend who was asking for some help on adding some features in it, I can't upload the whole script as it will be going to be too long. The whole HTML script has 14076 characters with 289 lines.

I have only studied java and not javascript with HTML, so I need help with this one.

<script>


    window.onload = function() {

        var goDown = document.getElementById('uniqueNav');
        var goRight = document.querySelector('.clothesNav');
        var goUp = document.querySelector('.shrink');

        goDown.style.marginTop = "0px";
        goRight.style.marginLeft = "5px";
        goUp.style.height = "0px";

    }        

    $('document').ready(function(){

        var name = "Ombre Printed Shirt";
        var price = "P499.00";

        var initialStock = 0;
        var currentStock = initialStock;

        document.querySelector('#clothTitle').innerHTML = "" +name;
        document.querySelector('#clothPrice').innerHTML = "Price: " +price;
        document.querySelector('#PITitle').innerHTML = "" +name;
        document.querySelector('#PIPrice').innerHTML = "Price: " +price;

        document.querySelector('#currentStock').innerHTML = "CurrentStocks: " +currentStock;

    }); //------------------------Change This Every Document ----------------------------//

</script>

then this in my JavaScript File:

var cStocks = document.getElementById('currentStock').data;
        alert(typeof cStocks);
        alert("Data in cStocks = " + cStocks);
        if (!cStocks) {cStocks = 0; alert("cStocks, not a valid number");}
        if ((cStocks <= 0) == true)
        {
            document.querySelector('.clothButton').style.display='none';
            document.querySelector('.clothButtonDisabled').style.display='flex';
        }
        else
        {
            document.querySelector('.clothButton').style.display='flex';
            document.querySelector('.clothButtonDisabled').style.display='none';
        }

upon loading the page, the alert says thaat the data type is undefined. I don't know what's happening with my code. did I miss something?

By the way, I have JQuery on my HTML page. it says JQuery v3.3.1 as a version

Assuming it's the variable `cStocks` that comes back as undefined, why would a DOM element have a `data` property? Are you sure you didn't mean to use either jQuery's `data()` or `element.dataset.data` etc? — adeneo, Mar 22 '19 at 01:46
By the way, forgot to change it back to .value, but same thing happens @adeneo — SolarPH, Mar 22 '19 at 01:49
It doesn't look to me like #currentStock will have a data attribute, or value attribute (which is for inputs), so of course the js returns undefined. Right now it looks like #currentStock is having the innerHTML set on the documentReady to Current Stocks: 0. — Chris Strickland, Mar 22 '19 at 01:59
Additonal info. Even I have set the value as String, the alert still says that it was unidefined — SolarPH, Mar 22 '19 at 02:02

score 0 · Answer 1 · answered Mar 22 '19 at 02:01

0

It doesn't look to me like #currentStock will have a data attribute, or value attribute (which is for inputs), so of course the js returns undefined. Right now it looks like #currentStock is having the innerHTML set on the document.ready to Current Stocks: 0

You do have an accessible variable, currentStock, which is defined during document.ready. Why aren't you accessing it directly? It will have the numeric value in it already. All you can get from #currentStock is the html you generated on document.ready, and you'd have to parse the number out of it, when it's available in raw form in the js variable currentStock.

answered Mar 22 '19 at 02:01

Chris Strickland

3,388
1
16
18

I also tried to put it inside a separate script tag, but it behaves the same. I don't know if I made the variable data accessible by the javascript file. – SolarPH Mar 22 '19 at 02:25
What I'm saying is that cStocks would be expected to contain undefined, because it's getting assigned the value of document.getElementById('currentStock').data, and there's no such thing unless #currentStock explicitly has a data attribute. Does it? And if so, where is it getting set? There's also no such thing as document.getElementById('currentStock').value unless #currentStock is an input element. Is it? If it is, where is the value getting set, and what is it getting set to? Let me put together a fiddle to demonstrate the problem. – Chris Strickland Mar 22 '19 at 02:45
https://jsfiddle.net/Ln2gazyv/1/ Take a look at this. It contains elements necessary for the document.ready to work. It has four divs and one input. I don't know for sure if #currentStock is an input element or not from your question. Click the button and see what it outputs. Inspect the input element and you can see the innerHTML element is written, but it doesn't seem to be able to be read. Put something in the text box and click the button again. It will output the value. Read this link: https://stackoverflow.com/questions/20604299/what-is-innerhtml-on-input-elements – Chris Strickland Mar 22 '19 at 03:41
It did read the data, but it also did display a textbox that can be edited. I somehow need it to be like it only displays the number like an inventory count. – SolarPH Mar 22 '19 at 03:54
I guess what I'm saying is that it's difficult to diagnose your code with what you have given. If you have an input element, you need to set the value. If you are displaying the value in a div or similar, then you want to set the innerHTML, but in either case I don't know why you are trying to assign to cStock from #currentStock when you are writing the data to #currentStock from var currentStock in the first place. Why don't you just use that same variable instead of trying to create a new one? – Chris Strickland Mar 22 '19 at 06:34

Cannot get the number of var using javascript

1 Answers1