i was looking at my old HTML projects, when i saw a text editor i made, but the style was not very nice and some functions didn’t work like the download function, when i press the download button i get the error “TypeError: Cannot read properties of null (reading ‘value’)”, can someone see what I did wrong? because I can’t find it myself, thanks! This is my code:
<!DOCTYPE html>
<html lang="nl">
<head>
<script src="https://smtpjs.com/v3/smtp.js">
</script>
<script type="text/javascript" src="https://webtinq.nl/texteditor/node.js"></script>
<link rel="stylesheet" type="text/css" href="https://webtinq.nl/texteditor/css/style.css">
<title>DENORY TEXT EDITOR</title>
<link rel="shortcut icon" href="https://webtinq.nl/texteditor/afbeeldingen/editor.jpeg">
</head>
<body>
<img src="https://webtinq.nl/texteditor/afbeeldingen/Throbber-small.gif" id="loading" style="display: none; position: fixed; z-index: 9; left: 50%; top: 50%;">
<center>
<center>
<input type="text" placeholder="file name" id="fname" value="untitled">
<input type="button" id="dwn-btn" value="Download"/>
<button onClick="save()">save</button><button onClick="load()">load save</button><button onClick="document.getElementById('inputfile').click();" id="fi">Upload file</button><input type="file" name="inputfile"
id="inputfile" onchange="setTimeout(function(){document.getElementById('fi').innerHTML = 'Upload file - ' + document.getElementById('inputfile').value.split(/(\|/)/g).pop().split('.', 1)[0] + '.' + document.getElementById('inputfile').value.split('.')[1];}, 200);"></center>
<br>
<script type="text/javascript">
</script></center>
<br><center><textarea id="text-val" rows="4" style="height: 800px; width: 60%;"></textarea></center><br>
<script>
var text = document.getElementById("text-val").innerHTML;
var filename = document.getElementById("fname").value;
function load() {
document.getElementById("loading").style.display = "block";
const setTimeOutOne = setTimeout(loadtwo, 2000);
function loadtwo() {
document.getElementById("text-val").value = localStorage.getItem("text");
document.getElementById("fname").value = localStorage.getItem("name");
document.getElementById("loading").style.display = "none";
}
}
function save() {
document.getElementById("loading").style.display = "block";
const setTimeOutTwo = setTimeout(savetwo, 3000);
function savetwo() {
localStorage.setItem("text", document.getElementById("text-val").value);
localStorage.setItem("name", document.getElementById("fname").value);
document.getElementById("loading").style.display = "none";
}
}
document.getElementById('inputfile')
.addEventListener('change', function() {
document.getElementById("fname").value = document.getElementById("inputfile").value.split(/(\|/)/g).pop().split('.', 1)[0] + "." + document.getElementById("inputfile").value.split('.')[1];
var fr=new FileReader();
fr.onload=function(){
document.getElementById('text-val').innerHTML = fr.result;
}
fr.readAsText(this.files[0]);
})
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
document.getElementById("dwn-btn").addEventListener("click", function(){
try{
const d = new Date();
let hour = d.getHours();
let minutes = d.getMinutes();
// Generate download of hello.txt file with some content
if(filename.includes(".pdf") || filename.includes(".docx") || filename.includes(".pptx") || document.getElementById("ftype").value == "") {
alert("file type not accepted");
} else {
download(filename, text);
}
}catch(e){
alert(e);
}
}, false);
</script>
</body>
</html>
I tried searching for errors in the code, but i couldn’t find any, so that’s why i’m asking this question.