Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kevin Dupuy
Kevin Dupuy
12,281 Points

Javascript loop seems to execute, but shows error anyway - Uncaught TypeError: Cannot read property 'value' of null

I am building a breaking news content generator that takes data typed in forms to generate a generic story. After a user types how many people were killed in a shooting, the code generates an additional form to identify the victim.

I want to take the data entered into the new form and create objects for each victim identified. The code below takes the data from the form, creates the object and pushes the object to an array.

It seems to do all of that correctly. Using pushKilled() in console creates the objects and pushes it to the array. But still gives a "Uncaught TypeError: Cannot read property 'value' of null" which I believe is causing issues when I try to use the code with other functions.

https://github.com/thewebkevin/nformr/blob/Identification/nformr.js#L42-L68

Also, the reason the loops include (i < peopleKilled + 1) is to match var i with the generated form IDs and the var counter lower in the code. Not the best way to do it I know, and I need to fix it.

**Side note, this is the first Javascript project I have created. I'm sure it probably looks really sloppy and there is a lot of room for improvement.

2 Answers

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Probably in your getFormData() function you need to convert peopleKilled into a number. It looks like a number but javaScript got it from your form as a string.

Use parseInt(peopleKilled, 10) to turn it into an integer. You can find more on parseInt here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Don't convert it into a number in your pushKilled function, but if you use this demo then you will see that it doesn't throw an error

function pushKilled() {
    "use strict";
    var i = 1;

    //peopleKilled needs to be converted from a String to an Integer
    for (i; i < (parseInt(peopleKilled, 10) + 1); i += 1) {

        killedVictim = {
            firstName: document.getElementById("killedFName" + i).value,
            lastName: document.getElementById("killedLName" + i).value,
            age: document.getElementById("killedAge" + i).value,
            fullName: document.getElementById("killedFName" + i).value + " " + document.getElementById("killedLName" + i).value
        };

        //log killed Victim Object
        console.log(killedVictim);
        killedVictims.push(killedVictim);
    }

    //log killedVictims Array
    console.log(killedVictims);
}
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

This may be a more clear example

<p>
    <input id="num1" type="text" value="1"></imput>
</p>

<script>
var num1 = document.getElementById('num1');

//string is equal to 1
console.log(typeof num1.value + ' is equal to ' + num1.value);

//number is equal to 1
console.log(typeof parseInt(num1.value, 10) + ' is equal to ' + parseInt(num1.value, 10));
</script>
Kevin Dupuy
Kevin Dupuy
12,281 Points
Kevin Dupuy
Kevin Dupuy
12,281 Points

Thank you so much. That seems to be working now. It seems I was under the impression that .value was returning a number instead of a string for my first 2 fields.