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
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);
}
}
}>Solution :
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
}
}
}