Filename undefined for Blob ?

M

millie78526

Joined
Oct 28, 2023
Messages
2
Reaction score
0
TIA ,
I am getting filename in <script><head>
JavaScript: 
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var allHtml =  document.documentElement.outerHTML;
alert(filename);
But when I try to reference it in a later function 'function saveAs2' it has become undefied .
What am I doing wrong ?
JavaScript: 
<!DOCTYPE html>
<html>
<head>
<title>4-textareas.html</title>
<style>
.container {
      display: flex; /* Use flexbox to create a row layout */
}

.box {
  flex: 1;
  min-width: 200px;
  border: 1px solid black;
  padding: 10px;
  overflow-x: auto; /* Add this line to enable horizontal scrolling */
}
.textArea {
  flex: 1;
  min-width: 200px;
  border: 1px solid black;
  padding: 10px;
  overflow-x: auto; /* Add this line to enable horizontal scrolling */
}

</style>
<script>
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var allHtml =  document.documentElement.outerHTML;
alert(filename);
</script>
</head>
<body>
<h4 style="text-align:center">Compare Stuff</h4>
<div class="container">
    <textarea class="textArea" contenteditable="true" >
    1
    </textarea>
    <textarea class="textArea" contenteditable="true" >
    2
    </textarea>
</div>

<div class="container">
    <textarea class="textArea" contenteditable="true" >
    3
    </textarea>
    <textarea class="textArea" contenteditable="true" >
    4
    </textarea>
</div>

<div class="container">
    <textarea class="textArea" contenteditable="true" >
    5
    </textarea>
    <textarea class="textArea" contenteditable="true" >
    6
    </textarea>
</div>

<div class="container">
    <textarea class="textArea" contenteditable="true" >
    7
    </textarea>
    <textarea class="textArea" contenteditable="true" >
    8
    </textarea>
</div>

<br>
<div>
<button id="wholePageId" onclick="saveAs(filename, allHtml)">Save Whole Page</button>
<br>
</div>
<br>

<script>
function saveItAll2() {
var blankVar = "";
  fromList  = document.getElementsByClassName("textArea");
  for (var i = 0; i < fromList.length; i++) {
    fromList[i].innerHTML = fromList[i].value ;
  }
}// ========================================
</script> 

<script> 
         function saveAs2(filename, allHtml) {
           saveItAll2();
          
         allHtml =  document.documentElement.outerHTML;

console.log("filename = " + filename)

var blob = new Blob([allHtml], {type: 'text/html'});
          if(window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveBlob(blob, filename);
          }
          else{
              var elem = window.document.createElement('a');
              elem.href = window.URL.createObjectURL(blob);
              elem.download = filename;       
              document.body.appendChild(elem);
              elem.click();       
              document.body.removeChild(elem);
          }
         }   
</script>

<script>
/*
IF console.log(toConsoleLogId.value); if you want what’s typed in the box use .value .
IF console.log(toConsoleLogId.innerHTML); if you want what was hardcoded into the text box’s HTML , use .innerHTML .
*/
var  fromList;  var  intoList;
function saveItAll() {
var blankVar = "";
  fromList  = document.getElementsByClassName("box");
  for (var i = 0; i < fromList.length; i++) {
    fromList[i].innerHTML = fromList[i].value ;
  }
}
</script> 

<script> 
//         var filename = "CompareStuff-1-box-1-textarea.html"; 
//         var allHtml =  document.documentElement.outerHTML;

         function saveAs(filename, allHtml) {
           saveItAll();
          
         allHtml =  document.documentElement.outerHTML;
           saveAs2()
           }
</script>


</body>
</html>
 
M

millie78526

Joined
Oct 28, 2023
Messages
2
Reaction score
0
Aha...
Turns out I was trying to use something before it was defined
(well , I knew that , I just didn't know where.).
Specifically:
JavaScript: 
         function saveAs2(filename, allHtml) {
           saveItAll2();
        
         allHtml =  document.documentElement.outerHTML;

console.log("filename = " + filename)

         document_URL = document.URL;
         document.getElementById("titleId").innerHTML = document_URL;
// Strip off everything thru the last / :       
var     pathArray = window.location.pathname.split('/');
var     secondLevelLocation = pathArray[pathArray.length - 1];
         filename  = secondLevelLocation ;
         titleName = secondLevelLocation ;
alert("alert-02 says: titleName = " + titleName);       


var blob = new Blob([allHtml], {type: 'text/html'});

Here is the full corrected code with 8 textarea's:

JavaScript: 
<!DOCTYPE html>
<html>
<head>
<title title id="titleId">nothing yet</title>
<style>
.container {
      display: flex; /* Use flexbox to create a row layout */
}

.textArea {
  flex: 1;
  min-width: 200px;
  border: 1px solid black;
  padding: 10px;
  overflow-x: auto; /* Add this line to enable horizontal scrolling */
}

</style>
<script>
         var filename = "";
         var allHtml =  document.documentElement.outerHTML;
         var document_URL;
         var titleName;
</script>
</head>
<body>
<h4 style="text-align:center">Compare Stuff & Save Changes</h4>
<div class="container">
    <textarea class="textArea" contenteditable="true" >
    1
    </textarea>
    <textarea class="textArea" contenteditable="true" >
    2
    </textarea>
</div>

<div class="container">
    <textarea class="textArea" contenteditable="true" >
    3
    </textarea>
    <textarea class="textArea" contenteditable="true" >
    4
    </textarea>
</div>


<div class="container">
    <textarea class="textArea" contenteditable="true" >
    3
    </textarea>
    <textarea class="textArea" contenteditable="true" >
    4
    </textarea>
</div>

<div class="container">
    <textarea class="textArea" contenteditable="true" >
    5
    </textarea>
    <textarea class="textArea" contenteditable="true" >
    6
    </textarea>
</div>

<div class="container">
    <textarea class="textArea" contenteditable="true" >
    7
    </textarea>
    <textarea class="textArea" contenteditable="true" >
    8
    </textarea>
</div>

<br>
<div>
<button id="wholePageId" onclick="saveAs2(filename, allHtml)">Save Whole Page</button>
<br>
</div>
<br>

<script>
function saveItAll2() {
var blankVar = "";
  fromList  = document.getElementsByClassName("textArea");
  for (var i = 0; i < fromList.length; i++) {
    fromList[i].innerHTML = fromList[i].value ;
  }
}// ========================================
</script>

<script>
         function saveAs2(filename, allHtml) {
           saveItAll2();
        
         allHtml =  document.documentElement.outerHTML;

console.log("filename = " + filename)

         document_URL = document.URL;
         document.getElementById("titleId").innerHTML = document_URL;
// Strip off everything thru the last / :       
var     pathArray = window.location.pathname.split('/');
var     secondLevelLocation = pathArray[pathArray.length - 1];
         filename  = secondLevelLocation ;
         titleName = secondLevelLocation ;
      
/* alert("alert-02 says: titleName = " + titleName); 
IF console.log(toConsoleLogId.value); if you want what’s typed in the textArea use .value .
IF console.log(toConsoleLogId.innerHTML); if you want what was hard coded into the textArea  HTML , use .innerHTML .
*/

var blob = new Blob([allHtml], {type: 'text/html'});
          if(window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveBlob(blob, filename);
          }
          else{
              var elem = window.document.createElement('a');
              elem.href = window.URL.createObjectURL(blob);
              elem.download = filename;     
              document.body.appendChild(elem);
              elem.click();     
              document.body.removeChild(elem);
          }
         } 
</script>

<script>
/*
IF console.log(toConsoleLogId.value); if you want what’s typed in the textArea use .value .
IF console.log(toConsoleLogId.innerHTML); if you want what was hard coded into the textArea  HTML , use .innerHTML .
*/
</script>

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Backticks and class elemnt comby not working 1
I am trying to detect Which image id="" was clicked ? 22
I want to Display Excel As HTML In js 2
Strange result using "for(in... " iteration 2
Issue with textbox script? 0
When draggable=false & draggable=true dont work ? 1
How to get event.target.id ? 3
Problems with using event handlers for button and textarea input 1

Members online

Total: 497 (members: 2, guests: 495)
Robots: 122

Forum statistics

Threads
474,056
Messages
2,570,441
Members
47,125
Latest member
MDBT

Latest Threads

Top