sugafree Posted March 27, 2014 Share Posted March 27, 2014 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> Link to comment Share on other sites More sharing options...
davej Posted March 27, 2014 Share Posted March 27, 2014 I see several potential issues with this idea. How will you preserve these comments? You are going to write each of them to a database table? How are you going to select and record where they get inserted into the page? I don't know how you would translate a mouse click event providing x-y coordinates into a parent element that you could then attach a comment container to. Link to comment Share on other sites More sharing options...
sugafree Posted March 27, 2014 Author Share Posted March 27, 2014 I dont need to store these comments anywhere, I only have to do the javascript bit of it so if I close the page and it will all disappear it doesnt matter. X-Y coordinates for the question 'where to put' is not a bad idea, but I will still need a unique id or name to each new node. Also with a unique id, might be easier to create just a dropdown menu to select which one to delete or the checkbox automatically added to nodes and then a delete button with a function to delete all checked nodes? Is that a bad idea? for the unique id var node=document.createTextNode(inputText); node.setAttribute("id", "p + ([i++)") or something.. and then set a loop for i. would this work? Link to comment Share on other sites More sharing options...
davej Posted March 27, 2014 Share Posted March 27, 2014 I don't see any real need for a unique id if you are going to abandon the added comment element. The primary problem to work on is how to select a parent element. Link to comment Share on other sites More sharing options...
sugafree Posted March 27, 2014 Author Share Posted March 27, 2014 Im sorry I dont understand it at all. I thought the parent element is div1 and also dont understand why is the parent element so important. Is that going to be used to select the nodes to be deleted? To start with the basic version, without the XY coordinates, what would you say is the best or good and easy option to be able to select which ones to delete. Checkbox created with the new nodes? Thanks Link to comment Share on other sites More sharing options...
davej Posted March 27, 2014 Share Posted March 27, 2014 Ok, start with this exercise. Say that you want to click on any element on a page and cause that element to have a gray background color. How would you do that? Link to comment Share on other sites More sharing options...
sugafree Posted March 28, 2014 Author Share Posted March 28, 2014 Im back. I have got a few ideas, but I dont want to sound like an absolute joke. Im going to read again the js tutorial and I will try to come up with something soon. Link to comment Share on other sites More sharing options...
sugafree Posted March 28, 2014 Author Share Posted March 28, 2014 Ok i would use <body onmousedown="...()"> In that function first I would need a var x= getElementById, assuming everything has an id, after I would need to find the code for set.backgroundcolor of var x to grey. Am I really far from reality? Link to comment Share on other sites More sharing options...
sugafree Posted March 28, 2014 Author Share Posted March 28, 2014 onmousedown= and give the function to create a new node?? Is that what I meant to figure out? Anyway its a good idea, but would it automatically store the coordinates and I would need to put it together? I only few a few more days to finish this, and if I would have to use both, I would rather create empty div's on the page and set the id's in html, also this onmousedown would be a lot easier as well I guess. The problem with this is I would have limited number of divs only Link to comment Share on other sites More sharing options...
davej Posted March 28, 2014 Share Posted March 28, 2014 Well, go ahead and create a sample page with some Lorem Ipsum and demonstrate this. Link to comment Share on other sites More sharing options...
sugafree Posted March 28, 2014 Author Share Posted March 28, 2014 Ok this is not working yet..but I hope I am on the right track. I am stuck with it a bit. Not sure if I should use setProperty or setAttribute also dont know how to call that properly and cant find many examples I could use. If thats correct, I think it should work, although I worked my way around and tname=targ.tagName; should be something like tname=targ.tagId but again couldnt find how to call id instead of tagname. Tried tagid, tagId, Id but I think still could only get the tagname. What do you think? <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML</title><script>function whichElement(e){var targ;if (!e) { var e=window.event; }if (e.target) { targ=e.target; }else if (e.srcElement) { targ=e.srcElement; }var tname;tname=targ.tagName;tname.style.setProperty("background-color: grey;");//alert("You clicked on a " + tname + " element.");} /*var e=window.event;e.target=var target=document.getElementById().target;("background-color", "grey"); } */ </script></head> <body onmousedown="whichElement(event)"><div id="contentWrapper" style="width: 1000px; margin: auto;"><div id="leftSidebar" style="width: 200px; height: 200px; background-color: red; float: left; margin: 12px 20px;">left</div> <div id="middle" style="width: 200px; height: 200px; background-color: red; float: left; margin: 12px 20px;">middle</div><p id="right" style="width: 200px; height: 200px; background-color: red; float: left; margin: 12px 20px;">right</p></div></body> Link to comment Share on other sites More sharing options...
sugafree Posted March 28, 2014 Author Share Posted March 28, 2014 It says tname.style is undefined. Is the background-color bit wrong? Link to comment Share on other sites More sharing options...
davej Posted March 28, 2014 Share Posted March 28, 2014 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>select</title><script>window.onload = function(){list = document.getElementsByTagName('p');for(var i=0,len=list.length ; i<len ; i++){list[i].onclick = mclick;list[i].style.cursor = 'pointer';}}function mclick(e){e.target.style.backgroundColor = '#999';var ans = confirm('Add a comment to this div?');if (ans==true){e.target.style.backgroundColor = '#f00';}else{e.target.style.backgroundColor = '';}}</script></head><body><p>Click on a paragraph. A background color will be applied to the element that triggered the event.</p><p>Click on a paragraph. A background color will be applied to the element that triggered the event.</p><p>Click on a paragraph. A background color will be applied to the element that triggered the event.</p><p>Click on a paragraph. A background color will be applied to the element that triggered the event.</p><p>Click on a paragraph. A background color will be applied to the element that triggered the event.</p><p>Click on a paragraph. A background color will be applied to the element that triggered the event.</p></body></html> Link to comment Share on other sites More sharing options...
sugafree Posted March 28, 2014 Author Share Posted March 28, 2014 So mine wasnt even close:( Im gonna look into target event stuff now...thanks Link to comment Share on other sites More sharing options...
davej Posted March 28, 2014 Share Posted March 28, 2014 Hmmm... you had a good idea. I had forgotten that events return the target -- which solves the primary problem of identifying the parent that you would attach a comment box to. Link to comment Share on other sites More sharing options...
sugafree Posted March 30, 2014 Author Share Posted March 30, 2014 Hi, I am still working on this. I got this far, but when I want to delete a new node, I have to thick it and it can only be the top one and only 1 at the time. Could someone help me how to force it to delete all checked nodes at the same time? Some loop would do it? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML</title><script> function addNew(){ var inputText=form.inputText.value; var para=document.createElement("p"); para.setAttribute("id", "p"); var check=document.createElement("INPUT"); check.setAttribute("type", "checkbox"); check.setAttribute("id", "checkbox"); para.appendChild(check); var node=document.createTextNode(inputText); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); } function deleteComment(){var x = document.getElementById("checkbox"); if (x.checked == true)var parent=document.getElementById("div1"); var child=document.getElementById("p"); parent.removeChild(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"> </div> </body></html> Link to comment Share on other sites More sharing options...
sugafree Posted March 30, 2014 Author Share Posted March 30, 2014 this was the closest I got I think. Could anyone help me correct it pls? Thank you function deleteComment(){var x = document.getElementById("checkbox")[0][i++];for(var i=0; i<check.length; i++); if (x.checked == true)var parent=document.getElementById("div1"); var child=document.getElementById("p"); parent.removeChild(child);} Link to comment Share on other sites More sharing options...
sugafree Posted March 30, 2014 Author Share Posted March 30, 2014 and for function deleteComment I think there should be and else thingy as well, but what should I write there if I dont want it to do anything because if top box not checked I get an error msg or some sort of loop should be there? Link to comment Share on other sites More sharing options...
davej Posted March 30, 2014 Share Posted March 30, 2014 Well, I'm not sure I know why you need to delete anything. You click on a paragraph and then you get a modal box that asks if you want to attach a comment to the selected paragraph. If you click "Yes" then you get a modal box to enter your comment. Then you attach the comment as a child. No need to delete anything because it will all be erased when you do a page reload. I did revise my code above -- because I decided the event handler should only receive click events from paragraphs. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now