Jump to content
Sign in to follow this  
sugafree

Using appendChild to create a "p" and a checkbox right next to it

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Well, go ahead and create a sample page with some Lorem Ipsum and demonstrate this.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
<!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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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);}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...