"Error: cannot set Property appendchild() of null

Question

"Error: cannot set Property appendchild() of null

Asked 3 years, 11 months ago

Viewed 101 times

0

In my code I made a function to create a button and right after the user click on it the button and the other altered content are deleted.

I managed to reach that point, but button is at the end of body. To solve this I needed to use the function elementoPai.appendChild(node);, what would be the following result in my code:

var pai = document.getElementById("form1");

var b1fechar = document.createElement("BUTTON");

b1fechar.setAttribute("id", "b1fechar");

b1fechar = document.getElementById("b1fechar");

pai.appendChild(b1fechar);

That would be the interesting part of the code.

Whole javascript down here (file . js):

var pai = document.getElementById("form1");

//Funções básicas de texto para output visual no site
function GetMoveInfo()
{
    var ictext = document.getElementById("ictext").innerHTML = iceBeam.info;
    var b1fechar = document.createElement("BUTTON");
    b1fechar.setAttribute("id", "b1fechar");
    b1fechar.addEventListener("click", closeIcebeam, true);
    b1fechar.innerHTML = "Fechar";
    pai.appendChild(b1fechar);
    //document.createTextNode(""); para criar texto para outras ocasiões.
   
};

Everything works up to line 8.

HTML of the site:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Em construção</title>
<script type="text/javascript"></script>
</head>
<body>
<form id="form1">
<input type="radio" id="icebeam" name="mov" value="icebeam">
  <label for="icebeam" >Icebeam</label><br>
  <button type="button" onclick="GetMoveInfo()" id="showicebeam">+Informações</button><br>
  <p id="ictext"></p>
  <br>
  <input type="radio" id="flamethrower" name="mov" value="flamethrower">
  <label for="icebeam">Flamethrower</label><br>
</form>
</body>
</html>

I accept suggestions for code improvement too, obg.

– user216621

2020/12/16 at 16:52
1

b1fechar = document.getElementById("b1fechar"); pq assigned a value to an element that already had value, and hasn’t even been added to the DOM? this will result in null, the getElementById will read documents that are part of the DOM, and yours has not yet been inserted in this example. Other than that, in Function GetMoveInfo(), where was the "parent" variable set? Take advantage and remove the tag java, pq this code has nothing of java, use javascript

– Ricardo Pontual

2020/12/16 at 19:09
@Ricardopunctual does not have the java tag... It just has the javascript tag. I will review this error you commented, obg.

– user216621

2020/12/16 at 19:54

1 answer

Browser other questions tagged javascript html html5 function dom

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

by Lucas Bezerra • 84 points · Answer 1 · 2020-12-22T19:00:43+00:00

I’m sorry, but your question was very confusing, and it was only by analyzing the code that it was unclear what your intention was. Don’t take this the wrong way, you’re probably starting out, try using clearer variable names and functions and comment on the code explaining what each block does.

I made a version of your reworked code, the result is what I imagined was your intention, I hope to have helped and that you learn a lot still in this world of programming.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Em construção</title>
</head>
<body>
<form>
    <div>
        <span>First Option</span>
        <input type="radio" id="icebeam" value="firstoption">
        <button type="button" id="more" class="more-1" onclick="showContent(this)">More</button>
    </div>
    <div style="margin-top:10px;">
        <span>First Option</span>
        <input type="radio" id="icebeam" value="firstoption">
        <button type="button" id="more" class="more-2" onclick="showContent(this)">More</button>
    </div>

    <div id="father">
    
    </div>
</form>
<script type="text/javascript">
    const more = document.getElementById('more');
    function showContent(e){
        if(e.classList.contains('more-1')){
            document.getElementById('father').innerHTML = '<button id="delete">Deletar</button>' + ' Conteudo do 

Texto';
        } else {
            document.getElementById('father').innerHTML = '<button id="delete">Deletar</button>' + ' Conteudo do 

Texto';
        };
        document.getElementById('delete').addEventListener('click', deleteContent, false);

    }

    function deleteContent() {
            document.getElementById('father').innerHTML = '';
        };

    
</script>
</body>
</html>

This code will check the CSS class of the button to know which content to display within the Parent class.