Javascript setting innerHTML null issue

Question

When i run an ajax query, i get back an array of results. I want to create a new element and set its inner html to the results. The results are working fine, im getting them no problem. They contain the correct data. I can create the element with an id based on the result fine as well i just get:

Uncaught TypeError: Cannot set property 'innerHTML' of null

on this line:

document.getElementById(result[i]).innerHTML = result[i];

Do you know what is the issue?

Javascript:

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

        searchData = "searchData=" + $("#searchReviews").val() + "&action=" + "searchReviews";
        urlPath = "../index.php";

        if ($.trim($("#searchReviews").val()).length > 0) { // client is typing
            // Send the search data to database
            $.ajax({
                type: "POST",
                url: urlPath,
                data: searchData,
                dataType: 'JSON',
                success: function (result) {
                    console.log(result[0]);
                    console.log(result.length);

                    $("#searchText").empty(); // we want to refresh the results

                    for (i = 0; i < result.length; i++) {
                        var html = '<p id=' + result[i] + '></p><hr>';
                        $("#searchText").append(html);
                        document.getElementById(result[i]).innerHTML = result[i];
                    }
                },
                error: function(xhr, status, error) {
                    alert("Error" + xhr.responseText);
                }
            })
        } else {
            $("#searchText").empty();
        }
    })
}

HTML

            <div class="col-sm-5">
                <p class="text-center">Reviews</p> <hr>
                <div class="input-group">
                <input type="text" class="form-control" id="searchReviews" placeholder="Search reviews" onkeydown="SearchReviews();">
                </div>
                <p class="text-center" id="searchText"></p>
            </div>

Why don't you just add the HTML while appending the <p> tag itself,rather than adding that later? — Varun
– Varun, Commented Dec 4, 2017 at 6:08

Satpal · Accepted Answer · 2017-12-04 06:14:43Z

1

You don't need to get the element from DOM, As you can create it using jQuery and set its text.

var html = $('<p>', { id: result[i] , text : result[i] });
$("#searchText").append(html).append('<hr>');

You can just put text in <p> using string concatenation

var html = '<p id="' + result[i] + '">' + result[i] + '</p><hr>';
$("#searchText").append(html);

Note: ID attribute can't have spaces in them and should always wrap attributes in quotes.

I guess result[i] contains spaces thus you got NULL on statement document.getElementById(result[i])

edited Dec 4, 2017 at 6:14

answered Dec 4, 2017 at 6:08

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhavin Solanki · Accepted Answer · 2017-12-04 06:41:03Z

0

You can not use your result as selector attribute ID. ID should be unique and no space for one ID.

You can try this

for (i = 0; i < result.length; i++) {
    var html = '<p id="result' + i + '">'+ result[i] +'</p><hr>';
    $("#searchText").append(html);
}

Hope this works!

answered Dec 4, 2017 at 6:41

Bhavin Solanki

4,8143 gold badges28 silver badges47 bronze badges

Collectives™ on Stack Overflow

Javascript setting innerHTML null issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related