Cannot read property 'value' of null Javascript

Question

My Code:

var cat, inputdat;
var KeyUrl = "someurl";
cat = ["abc", "def", "ghi"];
var fLen = cat.length;

for (i = 0; i < fLen; i++) {

  inputdat += "<label for=\"" + cat[i] + "\">" + cat[i] + "</label><br><input type=\"text\" id=\"" + cat[i] + "\" name=\"" + cat[i] + "\" value=\"\"" + cat[i] + "\"><br><a href=\"" + KeyUrl + document.getElementById(cat[i]).value + "\" rel=\"nofollow\">Here</a><br>";

}
inputdat += "<br/>";
document.getElementById("res").innerHTML = inputdat;

<h2 id="res">hello</h2>

The error:

{
 "message": "TypeError: document.getElementById(...) is null",
 "filename": "https://stacksnippets.net/js",
 "lineno": 19,
 "colno": 202
}```

Part of the code causing the error:

href=\""+KeyUrl+document.getElementById(cat[i]).value+"

I am trying to append the value of the input to my keyurl but I am getting null.

By default input values are `null` so you probably want to check that the input isn't `null` — holtc, Nov 21 '20 at 09:04
Does your document have `cat[i]` selector on any element? Try logging the value of `cat[i]` to see if you have the right selector — Abrar Hossain, Nov 21 '20 at 09:04
check this answer - https://stackoverflow.com/questions/37967338/how-to-append-to-an-html-form-url-from-a-post-request — Divyesh, Nov 21 '20 at 09:05
@AbrarHossain once i removed the ```document.getElementById(cat[i]).value``` and using chrome console i got the value using same code — Chetan Biradar, Nov 21 '20 at 09:07
Is the script in the head of the document or at the bottom of the body? — Abrar Hossain, Nov 21 '20 at 09:10
without seeing whatever `cat` is, and without seeing the html, its pretty impossible to know what's going on outside of a null input value — holtc, Nov 21 '20 at 09:10
`cat[i]` will never equal `"res"`, and so the `document.getElementById(cat[i])` will never find a match — holtc, Nov 21 '20 at 09:27
it's null because it's yet generated. it has to be rendered before document.getElementById can get the value. — Someone Special, Nov 21 '20 at 09:27
@holtc _"By default input values are `null`"_ - That's not true. The `value` attribute of an empty `` element will return an empty string. — Andreas, Nov 21 '20 at 09:45

Krokodil · Answer 1 · 2020-11-21T09:36:25.330

Looks like there isn't an element with id abc, or the rest of the array cat.

You should run a loop that iterates through cat and checks if there is an element with ID cat[i]. Here is how that looks:

for (var i = 0; i < cat.length; i++) {
    if(!document.getElementById(cat[i])) {
        var div = document.createElement("div");
        div.id = cat[i];
        div.setAttribute("value", `alert('this is a test: ${i+1}')`);
        document.body.appendChild(div);

    }
}

The line document.getElementById(cat[i]) returns null because there is no element with such an ID, but the above code should fix that. Here is how I tested the code, if that will help:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<h2 id="res">hello</h2>


<script type="text/javascript" defer>
var cat, inputdat;
inputdat = "";
var KeyUrl = "javascript:"; // CHANGE THIS URL, IT IS JUST AN EXAMPLE
cat = ["abc","def","ghi"];
var fLen = cat.length;


for (var i = 0; i < cat.length; i++) {
    if(!document.getElementById(cat[i])) {
        var div = document.createElement("div");
        div.id = cat[i];
        div.setAttribute("value", `alert('this is a test: ${i+1}')`);
        document.body.appendChild(div);

    }
}




for (i = 0; i < fLen; i++) {

    console.log(cat[i]);
    
    inputdat += `<label for="${cat[i]}">${cat[i]}</label><br><input type="text" id="${cat[i]}" name="${cat[i]}" value="${cat[i]}"><br><a href="${KeyUrl+document.getElementById(cat[i]).getAttribute("value")}" rel="nofollow">Here</a><br>`;


    inputdat += "<hr/>";
    
}

document.getElementById("res").innerHTML = inputdat;
</script>


</body>
</html>

yes - there isn't an element with the `ID`s in the array. That is why when the script tries to find `#abc`, `#def`, or `#ghi` it returns `null`, which obviously does not hold the property "`value`" — Krokodil, Nov 24 '20 at 18:10

Cannot read property 'value' of null Javascript

1 Answers1