Trouble with: getElementById("input Text To Save").value;

JavaScript
1

Hello ,
I need Help .
I am getting an error for this statement :
var textToSave = document.getElementById(“inputTextToSave”).value;
Console Error:
LIVE-Code-Editor-2-Panes-WIP.html:90 Uncaught TypeError: Cannot read properties of null (reading ‘value’)
at saveTextAsFile (LIVE-Code-Editor-2-Panes-WIP.html:90:64)
at HTMLButtonElement.onclick (LIVE-Code-Editor-2-Panes-WIP.html:59:48)
Here is the complete code:

<!DOCTYPE HTML>
<html>
    <head>
       <style> 
	   textarea, iframe {
border:2px solid #400040;
height:600px;
width:100%;
}
</style>
	 </head>
	 <body>
<table border="2" width="100%" height="100%"> <tr bgcolor="#efdfff"><th>
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="50%" scope="col">  </td> 
<td width="50%" scope="col" align="left"> 
   <center><input onclick="runCode();" type="button" value= "Run Code!"></center>
</td>
</tr>
<td>
<form>
<center><b>Paste Your&nbsp; &nbsp;Html&nbsp;Js&nbsp;CSS&nbsp; &nbsp;Code here!</b></center>
<textarea name="sourceCode" id="sourceCode" id="inputTextToSave">
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>

</style>

</head>

<body>
<h1> Welcome Coders!</h1>
<p> Write HTML, Javascript or CSS here & click run code!
</p>

<script>

</script>
</body>

</html>

</textarea>

</form>
</td>

<td><b><center>Output</b></center>
<iframe name="targetCode"  id="targetCode"> </iframe> </td>
</table>
<table>
    <tr>
        <td>Filename to Save As:</td>
        <td><input id="inputFileNameToSaveAs"></input></td>
        <td><button onclick="saveTextAsFile()">Save File To Downloads</button></td>
    </tr>
    <tr>
        <td>Select a File to Load:</td>
        <td><input type="file" id="fileToLoad"></td>
        <td><button onclick="loadFileAsText()">Load Selected File</button><td>
    </tr>
</table>

<script>
function runCode() {
var content = document.getElementById('sourceCode').value;
var iframe = document.getElementById('targetCode');
iframe = (iframe.contentWindow)?iframe.contentWindow:(iframe.contentDocument)? iframe.contentDocument.document: 
iframe.contentDocument;

iframe.document.open();
iframe.document.write(content);
iframe.document.close();
return false;
}
runCode();
</script>
</tr>
</th>
</table>
 
<script type="text/javascript">
 
function saveTextAsFile()
{
    var textToSave = document.getElementById("inputTextToSave").value;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
 
    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
 
    downloadLink.click();
}
 
function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}
 
function loadFileAsText()
{
    var fileToLoad = document.getElementById("fileToLoad").files[0];
 
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) 
    {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("inputTextToSave").value = textFromFileLoaded;
    };
    fileReader.readAsText(fileToLoad, "UTF-8");
}
 
</script>

</body>
</html>

Thanks for your Help…

2

<textarea name="sourceCode" id="sourceCode" id="inputTextToSave">

an element cannot have 2 ID’s. Use 1 ID, and use it in both bits of your code.

2 Likes
3

Ah… much better…
Thank you very much !