Jump to content

Search the Community

Showing results for tags 'appendChild'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 6 results

  1. Hello & Thanks; Here is a ' mini-Tutorial: moving text to & from <textarea> & <pre> ' http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html I'll also put code here for safekeeping : <!DOCTYPE html> <html> <head> <!-- https://www.freeformatter.com/html-validator.html http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html --> <title id="titleId"></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <style> </style> </head> <body onload="documentURL() , onloadRestoreTextarea()" > <br> <button onclick="saveAs(filename, allHtml)">Save This Page</button> <br><br> <div id="inlineDiv" style="display: inline-block;"> <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;"> <button onclick="sendToConcoleLog ()">sendToConcoleLog</button> <br><br> <textarea id="toConsoleLogId" rows="4" cols="12">:</textarea> </div> <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;"> <button onclick="saveItAll()">Copy this into PRE</button> <br> <textarea class="copyFrom" rows="4" cols="12"></textarea> </div> <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;"> <button onclick="restoreItAll()">Restore this from Pre</button> <br> <pre contenteditable="true" class="pasteInto" ></pre> </div> </div> <!-- id="inlineBlock"> --> <div style="border-style: dotted; align-text: center; border-width: 1px;"> <pre> Thought I would make a turorial so I remember what I learned from you all , and to pass on your wisdom. Hope this helps someone :) Try this: ------------------------------------------------------------------------------------------------------------------------ 1) Type something into "Copy this into Pre" textarea box . Then click "Copy this into Pre" Button . Text is copied into "Restore this from Pre" "pre area ' . And "Copy this into Pre" textarea box , is Cleared . Study This : function saveItAll() ------------------------------------------------------------------------------------------------------------------------ 2) The click on "Restore this from Pre" Button , Text is copied from "Restore this from Pre" area into "Copy this into Pre" area . And "Restore this from Pre" area , is Cleared . Study This: function restoreItAll() ------------------------------------------------------------------------------------------------------------------------ 3) Now Type something into "Copy this into Pre" textarea box Again . Then click "Copy this into Pre" Button . Text is copied into "Restore this from Pre" pre area . And "Copy this into Pre" textarea box , is Cleared . But this time , click the "Save This Page" Button . Study This: function saveAs(filename, allHtml) This .html page will be saved in your Browser's download area . Since the "Restore this from Pre" pre area , is coded as contenteditable="true" , the downloaded page will save the "pre area" text as innerHTML . A nifty feature of 'contenteditable' is that upon opening the saved-page the content of "pre area" is now " hardCoded " into page . Study This: function onloadRestoreTextarea() ------------------------------------------------------------------------------------------------------------------------ See code : So in the ' body ' tag we have : "onloadRestoreTextarea()" which runs the " function onloadRestoreTextarea() " code , when page is loaded . Which copies text from "pre area" to " textarea" box . Also at ' body onload="documentURL() ' page load time: The function: function documentURL() is run , which copies ' this .html ' file's address into the ' title ' tag . BTW: for example (see code) and note that : IF you want to copy what’s typed in the box use .value . console.log(toConsoleLogId.value); IF you want what was hardcoded into the text box’s HTML , use .innerHTML . console.log(toConsoleLogId.innerHTML); Hope this helps someone.... http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html </pre> </div> <script> var copyFromVar = "one"; function saveItAll() { var blankVar = ""; var fromList; // = document.getElementsByClassName("copyFrom"); var intoList; // = document.getElementsByClassName("pasteInto"); fromList = document.getElementsByClassName("copyFrom"); intoList = document.getElementsByClassName("pasteInto"); for (var i = 0; i < fromList.length; i++) { copyFromVar = fromList[i].value ; intoList[i].innerHTML = copyFromVar; fromList[i].innerHTML = blankVar; fromList[i].value = blankVar; } }// </script> <script> var copyFromVarTwo = "two"; function restoreItAll() { var blankVar = ""; var fromListTwo; // = document.getElementsByClassName("copyFrom"); var intoListTwo; // = document.getElementsByClassName("pasteInto"); intoListTwo = document.getElementsByClassName("copyFrom"); fromListTwo = document.getElementsByClassName("pasteInto"); for (var i = 0; i < fromListTwo.length; i++) { copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; fromListTwo[i].innerHTML = blankVar; fromListTwo[i].value = blankVar; } } </script> <script> var copyFromVarOnload = "three"; function onloadRestoreTextarea() { var fromListTwo; // = document.getElementsByClassName("copyFrom"); var intoListTwo; // = document.getElementsByClassName("pasteInto"); var blankVar = ""; intoListTwo = document.getElementsByClassName("copyFrom"); fromListTwo = document.getElementsByClassName("pasteInto"); for (var i = 0; i < fromListTwo.length; i++) { copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; fromListTwo[i].innerHTML = blankVar; fromListTwo[i].value = blankVar; } } // reloadTextarea </script> <script> function sendToConcoleLog() { var var01 = toConsoleLogId.value; console.log(var01); // alert(var01); var var01 = toConsoleLogId.innerHTML; console.log("If nothing after : Then no nothing was typed into this textarea => " + var01); alert("If nothing after : Then no nothing was typed into this textarea => " + var01); console.log(toConsoleLogId.value); console.log(toConsoleLogId.innerHTML); /* should be console.log(toConsoleLogId.value); if you want what’s typed in the box, or console.log(toConsoleLogId.innerHTML); if you want what was hardcoded into the text box’s HTML. */ } </script> <script> var filename = ""; function documentURL() { document_URL = document.URL; document.getElementById("titleId").innerHTML = document_URL; } </script> <script> var filename = "Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore.html"; var allHtml = document.documentElement.outerHTML; function saveAs(filename, allHtml) { allHtml = document.documentElement.outerHTML; var blob = new Blob([allHtml], {type: 'text/csv'}); 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> </body> </html>
  2. Hello & Thanks; I am making great progress on my project , thanks to you folks . But I do still have a problem with 'createElement' and 'appendChild' . They work fine but when I try to Drag the 'newly created div' it doesn't drag . If I saveAs the page and open the saved page , The created 'div' Drag works fine . So it seems that something is not getting updated dynamically . Pls , why does this happen , and how to fix it ? Run page here: http://vmars.us/ShowMe/changeImage-WIP-Try-Drag-Create.html Thanks
  3. Hello & Thanks : In code below , how do I tell " dragElement(document.getElementByClassName("myDivClass")); " which clone was clicked on ? <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .myDivClass { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivHdr { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } .myDivHdrClass { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv" class="myDivClass"> <div id="mydivHdr" class="myDivHdrClass">Click here to move</div> <div contenteditable="true">Type here: </div> </div> <p>Click the button to copy the myDivClass element above, <br>including all its attributes and child elements, and append it to the document.</p> <button onclick="cloneFunction()">Try it</button> <script> function cloneFunction() { var elmnt = document.getElementsByClassName("myDivClass")[0]; var cln = elmnt.cloneNode(true); document.body.appendChild(cln); } </script> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("myDivClass")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "Hdr")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "Hdr").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> Thanks
  4. Hello. I can not understand why appendChild behaves in two different ways in my code. i have used appendChid in function below: function repalceImgs(tempArray,imgsNo,curIndex){ var x = document.getElementById("container").getElementsByClassName('pics'); var newdiv = document.createElement('div'); newdiv.setAttribute('id', 'pics'); newdiv.setAttribute('class', 'pics'); for (i = 0; i < imgsNo; i++) { newdiv.appendChild(tempArray[i]); } x[0].parentNode.replaceChild(newdiv, x[0]); var srcString = tempArray[curIndex].src; srcString = srcString.replace("small", "big"); var x = document.getElementById("container").getElementsByClassName('big-image'); x[0].src = srcString; } I call replaceImgs function from two different functions. one of them is moveRight function with code below: function moveRight(){ imageArray = getSmallImgs(); imgsNo = imageArray.length; curIndex = findCur(); tempArray = new Array(); for (var i = 0; i < (imgsNo - 1) ; i++) { tempArray[i + 1] = imageArray[i]; } tempArray[0] = imageArray[imgsNo - 1]; for (var i = 0; i < imgsNo; i++) { if (i < 3) { tempArray[i].style.display = "inline"; } else { tempArray[i].style.display = "none"; } } imageArray[curIndex].style.borderWidth = "thick"*/ curIndex++; repalceImgs(tempArray,imgsNo,curIndex); } the other function is used as click event on a picture with code below: function selectFun (){ imageArray = getSmallImgs(); imgsNo = imageArray.length; curIndex = -1; for (var i = 0; i < imageArray.length; i++) { if(imageArray[i] == this){ curIndex = i; } } repalceImgs(imageArray,imgsNo,curIndex) } When repalceImgs() is called from moveRight() the appendChild function adds the items in the tempArray to the newdiv but the items are not removed from tempArray. When repalceImgs() is called from selectFun() the appendChild function adds each item in the tempArray to the newdiv and the added item is removed from tempArray. I can not understand why this happens. I think appendChild() should work the same in these two cases.
  5. Hi everyone, I have been trying to fix this issue by visiting the forums here and there and also tried to do exactly what I learned from them yet, I am unable to add a div to another one. The error message in the console is : Uncaught TypeError: Cannot read property 'appendChild' of undefined And the code that I have been using is as follows. Could you please help me with this issue? <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>1js</title> <style type="text/css"> div.box { background-color: hsl(0, 0%, 0%); margin-left: 15px; width: 20px; height: 20px; } div.wrapper { width: 400px; height: 200px; background-color: green; margin: 0 auto; } </style> </head> <body> <div class="wrapper"> </div> <script type="text/javascript"> var wrappers = document.getElementsByClassName("wrapper"); var newDiv = document.createElement("div.box"); document.wrappers.appendChild(newDiv); } </script> </body> </html>
  6. Hi, I am trying to create a text tag where users can add comments, delete them and also choose where to insert that comment(if not default). My problem is how to give each new node a unique id, which should be a number 1, 2 and so on. Using these numbers, the user could select where to insert the new par or even to select which one to be deleted. To be honest I want to create a checkbox next to the new par, so the user can just thick which par to delete and then press the button, but I am open to better ideas:) For start could someone help me how to make it a create a unique id for each new nodes and how to call 2 var inside appendChild() Thanks <script> function addNew(){ var inputText=form.inputText.value var para=document.createElement("p"); var node=document.createTextNode(inputText); var x = document.createElement("INPUT"); x.setAttribute("type", "checkbox"); para.appendChild(node); // I tried para.appendChild(node, x); var element=document.getElementById("div1"); element.appendChild(para); // also element.appendChild(para, x); and all other variations. } function deleteComment(){ var parent=document.getElementById("div1"); var child=document.getElementById("ggg"); parent.removeChild(child); } /* * function addBefore(){ var inputText=form.inputText.value var para=document.createElement("p"); var node=document.createTextNode(inputText); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("line"); element.insertBefore(para,child); } * */ </script> </head> <body> <form id="form"> <input type="text" value="inputText" id="inputText" /> <input type="button" value="Add New Comment" onclick="addNew()" /> <input type="button" value="Delete A Comment" onclick="deleteComment()" /> </form> <div id="div1"> <p id="ggg">gggggg</p> </div> </body>
×
×
  • Create New...