How to notify that New Element exists ?

Hello & Thanks;
Same program , newest problem:
http://vmars.us/ShowMe/changeImage-Drag-Create-Restore.html

         var MyDivs; var MyDivsCount; var i;  var content;
         var  has_Focus = "none yet" ;
         
         function createMyNewDiv() {
         
var MyNewDiv = document.createElement("div");
                   console.log('MyNewDiv = ' + MyNewDiv);
                   MyNewDiv.setAttribute("class", "MyDiv");
                   MyNewDiv.innerHTML = "<div class='MyDivHeader'></div> <textarea class='txt' rows='4' cols='12'> </textarea> <br>";
                   content = document.getElementById("divStretch");
                   content.appendChild(MyNewDiv); 
                   dragElement(MyNewDiv);
                   
var MyNewPre = document.createElement("pre");
                   console.log('MyNewPre = ' + MyNewPre);
                   MyNewPre.setAttribute("contenteditable", "true");
                   MyNewPre.setAttribute("class", "pasteInto");
var preList = document.querySelectorAll("pre");
                   content = document.getElementById("preDiv");
                   content.appendChild(MyNewPre); 
}//ï»ż	

As I create a new class=“copyFrom” ,
I notify dragElement(MyNewDiv); that it exists ,
But ’ function saveItAll() ’ still thinks there is only 1 class=“copyFrom” . (Because it only copies ‘textarea 0’ to ‘pre-area 0’).
So I think I need to notify Somebody that there is a new element in town .
If that is the problem , how do I notify the powers that manage such things ?
Thanks

Each time you call saveItAll, you can refreshing your list of elements based on this line:

var  fromList   = document.getElementsByClassName("copyFrom");

Are you not seeing the number of items in fromList increasing?

Cheers,
Kirupa

Even when I add two textareas
fromList.length remains at 1 .
http://vmars.us/ShowMe/changeImage-Drag-Create-Restore.html

In your DevTools, what do the two textareas show up as? What is the HTML that is generated?

Here is the console output .
I first add two textareas .
Then click on Button
" BackUp myWork Until ‘Save This Page’ " .

I am wondering if
the way I have created new textarea ,
would be causing a problem .
I do this to create MyDivHeader & textarea .

<script>
         var MyDivs; var MyDivsCount; var i;  var content;
         var  has_Focus = "none yet" ;
         
         function createMyNewDiv() {
         
var MyNewDiv = document.createElement("div");
                   console.log('MyNewDiv = ' + MyNewDiv);
                   MyNewDiv.setAttribute("class", "MyDiv");
                   MyNewDiv.innerHTML = "<div class='MyDivHeader'></div> <textarea class='txt' rows='4' cols='12'> </textarea> <br>";
                   content = document.getElementById("divStretch");
                   content.appendChild(MyNewDiv); 
                   dragElement(MyNewDiv);
                   
var MyNewPre = document.createElement("pre");
                   console.log('MyNewPre = ' + MyNewPre);
                   MyNewPre.setAttribute("contenteditable", "true");
                   MyNewPre.setAttribute("class", "pasteInto");
var preList = document.querySelectorAll("pre");
                   content = document.getElementById("preDiv");
                   content.appendChild(MyNewPre); 
}//ï»ż	
 </script>	

Also, I tried using intoList.length; instead of
fromList.length; . But get the same results .
Thanks

The code that gets generated (AFTER I save the page) is this:

<div class="MyDiv" style="top: 65px; left: 202px;">
<div class="MyDivHeader"></div>
 <textarea class="txt" rows="4" cols="12"> </textarea>
 <br></div>
<div class="MyDiv" style="top: 103px; left: 374px;">
<div class="MyDivHeader"></div> 
<textarea class="txt" rows="4" cols="12"> </textarea> 
<br></div>
</div>  <!--   id="divStretch"  -->
and this:
<pre contenteditable="true" class="pasteInto"></pre>
<pre contenteditable="true" class="pasteInto"></pre></div>

It looks ok to me , and you ?
But the code that shows up in the console sources is this:

<div id="divStretch">
    <div class="MyDiv">
      <div class="MyDivHeader"></div>
             <textarea class="copyFrom" rows="4" cols="12">stuff in textarea 0 </textarea>   
    </div>
</div>  <!--   id="divStretch"  -->
and this:
<div id="preDiv">
<pre  contenteditable="true" class="pasteInto"  ></pre>
</div>

No change in the console sources ,
jis that normal ? .
Doesn’t look like what I am after ?
Thanks

I may be wrong here, but it seems like the issue is that your copyFrom variable doesn’t have an up-to-date list of all the textareas on the page. Looking at the code that gets generated, your textareas don’t have the copyFrom class on them, so how will the code know what element to get the values from?

Thanks Kirupa;
Your Help led me to realize that I don’t even need ‘pre’ and ‘copyInto’’ .
I can just use:
fromList[i].innerHTML = fromList[i].value ;
So that function now looks like:

<script>
var copyFromVar = "one";  var  fromList;  var  intoList; 
function saveItAll() {
var blankVar = "";
  fromList  = document.getElementsByClassName("copyFrom");
  for (var i = 0; i < fromList.length; i++) {
    fromList[i].innerHTML = fromList[i].value ;
  }
}// ========================================
</script> 

I am better understanding the diff between
.value and .iinerHTML .
Thanks

1 Like