problem z display js

const btnTask = document.querySelector('.taskAdd');
const input = document.querySelector('.inputTask');
const demo = document.querySelector('.demo');

const a = document.querySelector('.a');
const b = document.querySelector('.b');

btnTask.addEventListener('click', function(){

    addTaskElement();

})

function enterKeyPress(event){

    if(event.keyCode === 13){
        addTaskElement();
    }

}

addEventListener("keydown", enterKeyPress);

function checkLengthTask(){
    if(input.value.length < 4){
        demo.innerHTML = "Too Short"  
    }
}

function addTaskElement(){

    const createTask = document.createElement('div');
    createTask.classList.add('btnAddTaskElement');
    console.log('add' + input.value);

    const createDemo = document.createElement('div');
    createDemo.classList.add('demo1');
    createDemo.innerHTML = input.value;
    document.body.appendChild(createDemo);
    console.log(": " + createDemo);

    createTask.innerText = input.value;
    demo.appendChild(createDemo);


    function editTaskBtnElement(){
        const createBtnEdit = document.createElement('button');
        createBtnEdit.classList.add('btnEditTaskElement');
        createBtnEdit.innerHTML = "Edit";
        demo.appendChild(createBtnEdit);
        

        let maxEditElementTask = 1;
        let currentElementTask = 0;

        

        createBtnEdit.onclick = function(){
            const createInputEdit= document.createElement('input');
            createInputEdit.classList.add('createInputEdit');
            
            console.log('work')

            
            if(currentElementTask < maxEditElementTask){
                currentElementTask++;

                createInputEdit.focus();
                createBtnEdit.appendChild(createInputEdit);
                createInputEdit.value
                createBtnEdit.onclick = function(){
                    
                    createBtnEdit.addEventListener('click', function(){
                        console.log('work2');
                        createBtnEdit.innerHTML = 'Edit'; 
                        changeBtnSaveEdit();

                    })


                    function changeBtnSaveEdit(){
                        let hideInputEdit = document.querySelector('.createInputEdit');
                        if(hideInputEdit.style.display === "none"){
                            //createDemo.innerHTML = createInputEdit.value;
                            //createBtnEdit.innerHTML = 'Edit'; 
                            hideInputEdit.style.display = "block";


                        }
                        else{
                            console.log('doesnt work2')
                            hideInputEdit.style.display = "none";
                        }
                       
                    }
                }

            }
            
        }

    function deleteTaskBtnElement(){
        const createBtnRemove = document.createElement('button');
        createBtnRemove.classList.add('btnRemoveTaskElement');
        createBtnRemove.innerHTML= "Remove Task";
        demo.appendChild(createBtnRemove);
    
        createBtnRemove.onclick = function(){
            console.log('workw222');
            createTask.remove();
            createDemo.remove();
            createBtnEdit.remove();
            createBtnRemove.remove();
        }
       
        
    }
    deleteTaskBtnElement();
}
    editTaskBtnElement();
    checkLengthTask();

}

Chodzi o ten kawałek

                    createBtnEdit.addEventListener('click', function(){
                        console.log('work2');
                        createBtnEdit.innerHTML = 'Edit'; 
                        changeBtnSaveEdit();

                    })


                    function changeBtnSaveEdit(){
                        let hideInputEdit = document.querySelector('.createInputEdit');
                        if(hideInputEdit.style.display === "none"){
                            //createDemo.innerHTML = createInputEdit.value;
                            //createBtnEdit.innerHTML = 'Edit'; 
                            hideInputEdit.style.display = "block";


                        }
                        else{
                            console.log('doesnt work2')
                            hideInputEdit.style.display = "none";
                        }
                       
                    }

z konsoli

Uncaught TypeError: Cannot read properties of null (reading 'style')
    at changeBtnSaveEdit (script.js:90:42)
    at HTMLButtonElement.<anonymous> (script.js:83:25)

Chce żeby po kliknięciu w button edit/save sie ukrywał ale tego nie robi na tutkach to jakos dziala i robie podobnie z tym none/block

Za każdym razem musisz sprawdzać, czy znacznik HTML został prawidłowo pobrany z DOM, bo czasami do document.querySelector może zostać podany zły selektor, albo w ogóle może nie być takiego elementu na stronie w momencie, gdy chcemy go pobrać.

Przykład:

const input = document.querySelector('input');

if (input) {
  console.log('Input został prawidłowo pobrany');
  console.log(input.value);
  console.log(input.className);
  // ...
}

W Twoim kodzie trzeba zrobić podobny warunek

function changeBtnSaveEdit(){
  let hideInputEdit = document.querySelector('.createInputEdit');

  if (hideInputEdit) { // hideInputEdit && createDemo
    if(hideInputEdit.style.display === "none") {
      //createDemo.innerHTML = createInputEdit.value;
      //createBtnEdit.innerHTML = 'Edit';
      hideInputEdit.style.display = "block";
    }
    else{
      console.log('doesnt work2')
      hideInputEdit.style.display = "none";
    }
  }
}

albo korzystając z optional chaining (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

function changeBtnSaveEdit(){
  let hideInputEdit = document.querySelector('.createInputEdit');

  if(hideInputEdit?.style?.display === "none"){
    //createDemo?.innerHTML = createInputEdit?.value;
    //createBtnEdit?.innerHTML = 'Edit'; 
    hideInputEdit.style.display = "block";
  }
  else{
    console.log('doesnt work2')
    hideInputEdit?.style?.display = "none";
  }
}

Teraz przy tym drugim zapisie z ?. nie będzie błędu, tylko zostanie zwrócone undefined, ale złe używanie tego operatora utrudnia debugowanie kodu, więc bym uważał

A jak zrobić żeby można go było jeszcze raz otworzyć? w sensie
teraz jak klikam to sie otwiera i zamyka na amen, a chce zrobić że jak klikne to żeby się otworzyło zamkneło ale bede mógł to powtarzać

Nie można kliknąć elementu, który ma ustawione display: none, więc musiałbyś wywoływać display: block z innego miejsca w kodzie, np klikasz przycisk X i on ukrywa element Y, a drugie kliknięcie w przycisk X pokazuje element Y.