Javascript: Add Div by pressing a button - Typeerror: Cannot set Property 'innerHTML' of null

Asked

Viewed 231 times

0

What’s wrong with my code. I’ve tried it on Codepen and it works normally. Even the order of the elements are the same there, but in my Wordpress does not want to work. Note that here also works. Error displayed -> Typeerror: Cannot set Property 'innerHTML' of null

<label for="file">Envie sua receita.</label>
   <input type="file" id="file" name="file" multiple>
   <div id="div1"></div>
<a href="javascript:addCampo();"><i id="addFile" class="glyphicon glyphicon-plus">+</i></a>
<script>
var i = 1;
function addCampo(){ 
  var idDiv = 'div'+i;
  document.getElementById(idDiv).innerHTML = '<input type="file" id="file'+i+'" name="file'+i+'" multiple>';
   i++;
}
</script>

It’s just like that. I only made one Ctrl+C & Ctrl+V.

javascript

  • This means that the element with its ID is not found, so the getElementById returns null and consequently the method innerHTML does not exist. Make a console.log(idDiv); right after variable declaration idDiv and see if the elements exist in HTML with that ID.

  • Do you want to create a div for each input? Type: <div id="div1"><input></div>, <div id="div2"><input></div>, <div id="div3"><input></div> etc.

  • So... in the console.log(idDiv); shows the string div1. That’s exactly what I want. I don’t understand what you mean. C:\Users\genes\javascript λ node var.js<br> div1

  • Check this image: http://prntscr.com/inmugk

  • You want to insert each input file created within the div id="div1"?

  • The question is not where it will be placed, but why it shows the error only within Wordpress. Your doubt is in another part of the code that I haven’t even created yet. I think it’s related to what the Paulo R. F. Amorim answered. But that’s another thing. Note that in the question you have a code; run it! Note that you will add a new field by clicking on the "+". THAT DOESN’T HAPPEN IN MY TEST ENVIRONMENT.

Show 1 more comment

1 answer

0

The problem is that at no point is the next one being added div that will be accessed. An example how to solve this is:

<html>
<div id="principal">
<label for="file">Envie sua receita.</label>
   <input type="file" id="file" name="file" multiple>
   <div id="div1"></div>
</div>
<a href="javascript:addCampo();"><i id="addFile" class="glyphicon glyphicon-plus">+</i></a>
</html>
<script>
   var i = 1;
   function addCampo(){
      var idDiv = 'div'+i;
      document.getElementById(idDiv).innerHTML = '<input type="file" id="file'+i+'" name="file'+i+'" multiple>'; i++;
      document.getElementById('principal').innerHTML += '<div id="div'+i+'">
      </div>';
   }
</script>

  • Actually that second line of code inside the function was the other part I was going to write. The code is right. I don’t understand why you’re showing this error.

  • The way it is in the question will give error, changing the method addCampo() this way no longer occurs.

  • I tested your code. It gave the same error. As I said in the question, it works normally in other places, but on the site gives this error.

  • Run my code I put in.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.