0

I am working on an MVC asp.net project and within the browser debugger console I get this error. However, the innerText is read because it is pasting the text to a div in my project.

This is the javascript

    function addtoList(clicked_id) {
        var ProblemLabel = document.getElementById(clicked_id).innerText;
        //alert(clicked_id);
        document.getElementById("ProblemSelectionMade").textContent = `${ProblemLabel}`;
    }

My question is this, why would I get this error when the value clearly isn't null and it is being read?

The reason I need to fix it is because it interrupts other functions from being executed.

EDIT: This is the full error that is given

Create:443 Uncaught TypeError: Cannot read property 'innerHTML' of null at addtoList (Create:443) at CardButtonClick (Create:463) at HTMLDivElement.onclick (Create:1)

Where HTMLDivElement.onclick is a call to CardButtonClick, and where CardButtonClick contains multiple functions that are being ran.

I have tried doing research and I think I may know what the problem is. The clicked_id, is being dynamically created. I have checked within the browser and it does have an id. But, I am wondering if since it is dynamically created it is not added to the DOM and I need to do that somehow.

EDIT AGAIN: I have done more research and am very sure that the error occurs due to being dynamically created. This is how the element is created in this js

                    success: function (result) {
                        // alert(result);
                        var s = '<div></div>';

                        for (var i = 0; i < result.length; i++) {
                            s += '<div class="container"><div class="card"><div class="card-body" onclick="ChangeColors(this.id); CardButtonClick()" id="' + result[i].value + '">' + result[i].name + '</div></div ></div>';

                        }
                        // alert(s);

                        $('#ProblemCards').html(s);
                    },

And this is an example of the created element

<div class="card-body" onclick="ChangeColors(this.id); CardButtonClick()" id="12492">2 Thermocouples Mixer Body Temperature</div>

So, clicked_id is equivalent to result[i].value.

What I need to do, and don't know how is use an insertBefore or appendChild I believe.

Image of Console.log

Three33Steele
  • 51
  • 1
  • 9
  • apparently the element does not exists because the browser says it does not exist. – epascarello Aug 02 '21 at 12:30
  • But if the element didn't exist it wouldn't be pasting it at all. That's where I'm confused. I get the error that it doesn't exist, but yet, it uses it and works. – Three33Steele Aug 02 '21 at 12:32
  • Impossible for us to guess with the code provided. `document.getElementById(clicked_id)` can not find the element. So you probably have the wrong id in `clicked_id`. You need to debug. `console.log('clicked_id', clicked_id, document.getElementById(clicked_id));` – epascarello Aug 02 '21 at 12:32
  • Are you sure, it's exactly this snippet that throws the error? Because if that error is thrown, then 1) the element does not exist (in that moment) 2) the next line is definitively not executed ... – derpirscher Aug 02 '21 at 12:35
  • Please see my edit – Three33Steele Aug 02 '21 at 12:49
  • So did you debug? Did you inspect the element and make sure the id is there? – epascarello Aug 02 '21 at 13:01
  • What do you mean by that exactly? Yes, I debugged to launch the project in browser and watched for errors within browser. Sorry, just saqw you edited that. – Three33Steele Aug 02 '21 at 13:05
  • Yes. I have. Within the browser the element is there, it has an id, and has inner text. The ID is result[i]. value, and the text is result[i].name, like it is supposed to be. – Three33Steele Aug 02 '21 at 13:06
  • `Cannot read property 'innerHTML' of null` where is the innerHTML in your code? I do no see innerHTML? – epascarello Aug 02 '21 at 13:14
  • I had been using innerText but tried innerHTML instead. Isn't the "2 Thermocouples Mixer Body Temperature" this? – Three33Steele Aug 02 '21 at 13:15
  • So did you debug `console.log('clicked_id', clicked_id, document.getElementById(clicked_id));` or is it `console.log(document.getElementById("ProblemSelectionMade"))` not being found? – epascarello Aug 02 '21 at 13:16
  • Where I have alert(clicked_id) commented out in my original code, if I run that, the alerted id is returned "12492", but yet, this is the id that is being searched for innerHTML. This is why I am so confused. It clearly exists. I was looking at this article, https://stackoverflow.com/questions/9902803/getelementbyid-where-element-is-dynamically-created-at-runtime , but I am not certain how to make it work with the way I am creating the element. – Three33Steele Aug 02 '21 at 13:21
  • Run the console.log lines..... – epascarello Aug 02 '21 at 13:38
  • Added them into post for you – Three33Steele Aug 02 '21 at 13:42
  • I just figured it out. I had left clicked_id out of my previous function, CardButtonClick. It's weird that it would still read clicked_id even though it wasn't passed. Sorry for taking your time. It was a really odd problem. – Three33Steele Aug 02 '21 at 14:07

0 Answers0