Uncaught TypeError: Cannot read property 'addEventListener' of null error for image upload

» javascript » Uncaught TypeError: Cannot read property 'addEventListener' of null error for image upload

By : galileio

Date : November 22 2020, 10:38 AM

Any of those help Hi friends i am getting this error in following code: , Your code is looking for and element with ID 'upload':

code :

'var fileDiv = document.getElementById("upload");'

var fileDiv = document.getElementById("upload-image");

Share :

javascript:Uncaught TypeError: Cannot read property 'addEventListener' of null

By : sandeep

Date : March 29 2020, 07:55 AM

Hope that helps Put your JavaScript in the below of the body. It throws error because your JavaScript first works when your DOM doesn't ready.
And it is a good practice to load all scripts at the end of the body

code :

<html>
<body>
<input id="inp" type='file'>
<p id="b64"></p>
<img id="img">

<script type="text/javascript">
function EL(id) { return document.getElementById(id); } // Get el by ID helper function

function readFile() {
  if (this.files && this.files[0]) {
    var FR= new FileReader();
    FR.onload = function(e) {
      EL("img").src       = e.target.result;
      EL("b64").innerHTML = e.target.result;
    };       
    FR.readAsDataURL( this.files[0] );
  }
}

EL("inp").addEventListener("change", readFile, false);
</script>

</body>
</html>

Uncaught TypeError: Cannot read property 'addEventListener' of null on js

By : Maruthi Prasad

Date : March 29 2020, 07:55 AM

I wish this help you When you start your for loop you are starting the counter at 0. So the first time through your loop your code asks for:

code :

var customer = document.getElementById("quantity0");

for(var i = 1; i <= customerNodea.length; i++) {   
    var customer = document.getElementById("quantity"+i);
    customer.addEventListener("change", func, false);   
}

Javascript Error: Uncaught TypeError: Cannot read property 'addEventListener' of null

By : Terry

Date : March 29 2020, 07:55 AM

I wish did fix the issue. http://prntscr.com/ic1vom

code :

<!doctype html>
<html lang="en">
    <head></head>
    <body>
        <input id="hex">
        <input id="rgb">
        <script src="main.js"></script>
    </body>
</html>

document.addEventListener("DOMContentLoaded", function(event){
    function toHex(){
        console.log("Test");
    }

    var HexInput = document.getElementById("hex");
    var RGBInput = document.getElementById("rgb");
    HexInput.addEventListener("input", toHex());
});

Uncaught TypeError: Cannot read property 'addEventListener' of null on javascript

By : Chris

Date : March 29 2020, 07:55 AM

seems to work fine You are doing mistakes in your class attributes for class = loginPage, class = names and class = logButton. You are not putting your class name in double quotes and second is that your class=names should be class=name.
Check the below code:

code :

<div class = loginPage>
<input type = 'text' placeholder= 'Username' class = names></input> <a href = '../index.html'><button class = logButton> Login</button></a>
</div>

<div class ="loginPage">
<input type = 'text' placeholder= 'Username' class ="name"></input> <a href = '../index.html'><button class="logButton"> Login</button></a>
</div>

Laravel Uncaught TypeError: Cannot read property 'addEventListener' of null

By : Davide Grohmann

Date : March 29 2020, 07:55 AM

wish of those help addEventListener of null means, getElementById returned null, which means,
there is no HTML element with the ID 'textarea' in blade file.