-1

I have the following problem when I make my editor work it tells me that it does not read the none property in line 59 and in the if it reads the block property I make this editor for a college assignment it is based on google docs and word Problem

function changeDrop(id, yes=true, no=true) {
    if (document.getElementById(id).style){
        if (yes == true) {
            document.getElementById(id).style.display = "block";
        } if (no == true) {
            document.getElementById(id).style.display = "none";// problem here
        }
    }
}

// Load page types.
window.onload = function(){

    document.onclick = function(e){
        // Check if you clicked the page and it is editable.
        if(e.target.id == 'page') {
            document.getElementById('page').setAttribute('contenteditable', true);
        }
        if(e.target.id !== 'file-drop' && e.target.id !== 'file-button'){
            //element clicked wasn't the div; hide the div
            changeDrop('file-drop', false);
        }
        if(e.target.id !== 'tool-drop' && e.target.id !== 'tool-button'){
            //element clicked wasn't the div; hide the div
            changeDrop('tool-drop', false);
        }
        if(e.target.id !== 'edit-drop' && e.target.id !== 'edit-button'){
            //element clicked wasn't the div; hide the div
            changeDrop('edit-drop', false);
        }
        if(e.target.id !== 'font-drop' && e.target.id !== 'font-button'){
            //element clicked wasn't the div; hide the div
            changeDrop('font-drop', false);
        }
        if(e.target.id !== 'line-height-drop' && e.target.id !== 'line-height-button'){
            //element clicked wasn't the div; hide the div
            changeDrop('line-height-drop', false);
        }
        if(e.target.id !== 'open-drop' && e.target.id !== 'open-button'){
            //element clicked wasn't the div; hide the div
            changeDrop('open-drop', false // problem after
            
        }
    };

    var hash = (window.location.hash).replace('#', '');
    console.log(hash);
    if (hash.length == 0) {
        createSaveFile();
    }
    else {
        if (hash == "blank") {
            createSaveFile();
        } else if (hash == "essay") {
            document.getElementById("page").innerHTML = essaycontent;
            createSaveFile();
        } else if (hash == "resume") {
            document.getElementById("page").innerHTML = resumecontent;
            createSaveFile();
        } else if (hash == "letter") {
            document.getElementById("page").innerHTML = lettercontent;
            createSaveFile();
        } else if(hash == "viacc"){
            document.getElementById("page").innerHTML = viacccontent;
            createSaveFile();
        } else {
            console.log("Not an empty window. Loading files...")
            convertedHash = hash.replaceAll("%20", " ");
            openSaveFile(convertedHash);
        }
    }
}
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Laito
  • 17
  • 1
  • 7
  • Is the id correct? Is there an element in the HTML with exactly the id that your changeDrop function is receiving. You can check these – Obum Mar 04 '22 at 13:25
  • 1
    While the live demo feature of SO is great, it doesn't so any good if you (a) don't provide a [mcve] that actually demonstrates the problem or (b) split code that needs to work together between two separate demos. – Quentin Mar 04 '22 at 13:28
  • hello i solved the problem and i will take the tips for next time thanks to those who answered me. – Laito Mar 04 '22 at 14:42

1 Answers1

1

getElementById will return null if the element is not found in the DOM.
null does not have a style property.

You can fix this by checking the result of document.getElementById(id) before proceeding.

function changeDrop(id, yes=true, no=true) {
  const el = document.getElementById(id);

  if (el !== null){
    if (yes == true) {
      el.style.display = "block";
    } if (no == true) {
      el.style.display = "none";// problem here
    }
  }
}
Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32