Dynamic Div Generation with JS

Question

jckb188 0 Newbie Poster

12 Years Ago

Hello!

I am trying to figure out how to dynamically generate div ids, and then use onclick in correspondence with an image to pull up the correct div. I have been stumbling on this for two weeks and don't know where to turn at this point. Below is the current onclick JS function, but I have no start for the dynamic div generator. Thanks in advance for any help you might be able to provide. Also, I know this would be easier with JQuery but I am so close and time is an issue, so learning another library would be somewhat difficult at this time, but I am planning to do so soon after.

<script type="text/javascript">
function changeImg(){ 
this.setAttribute("src","http://www.domain.com/images/edit1active.png"); 
}
</script>

html-css javascript

4 Contributors
12 Replies
470 Views
1 Week Discussion Span
Latest Post 12 Years Ago Latest Post by Taywin

stbuchok

12 Years Ago

I can only guess that what you want is to show a div based on an image. Below is an example of this. When you click on the image, it will show a div based on an attribute that is set in the image.

<html>
<head>

</head>
<body>

<img id="myImage" data-divId="divId3" src="someImage.png" />

<div id="divId1" style="display: none;">
divId1
</div>

<div id="divId2" style="display: none;">
divId2
</div>

<div id="divId3" style="display: none;">
divId3
</div>

<div id="divId4" style="display: none;">
divId4
</div>

<script>

document.getElementById('myImage').onclick = function(){
    var div = document.getElementById(this.getAttribute('data-divId'));

    div.style.display = 'block';
};

</script>

</body>
</html>

Taywin 312 Posting Virtuoso

12 Years Ago

You didn't give much information at all... The function you gave is simply switching a supposedly an image from one source to another. If you want to generate a new div, where are you going to attach/append the newly element to? You can generate but you need to tie it to the DOM in order to display it.

// Assume that your current element has a parent.
// This additional code will append the newly created div to the caller element's parent
<script type="text/javascript">
function changeImg(){ 
  this.setAttribute("src","http://www.domain.com/images/edit1active.png");
  var newElem = document.createElement("div")
  newElem.id = "new_div"  // need another value to make it unique!
  newElem.innerHTML = "I just added a new Div!"
  this.parentNode.appendChild(newElem)
}
</script>

Edited 12 Years Ago by Taywin

jckb188 commented: Great thank you very much! +0

Taywin 312 Posting Virtuoso

12 Years Ago

What do you mean by reverse of onclick??? Oh you mean click again to reverse? You could do...

// in Javascript portion
// Assume that your current element has a parent.
// This additional code will append the newly created div to the caller element's parent
<script type="text/javascript">
var clickedOnce = false  // global variable
function changeImg(){ 
  this.setAttribute("src","http://www.domain.com/images/edit1active.png");
  if (clickedOnce) {  // already clicked once, reverse
    var el = document.getElementById("new_div")  // must match the created one
    if (el) { el.parentNode.removeChild(el) }  // remove it
    clickedOnce = false
  }
  else {  // never click before, create
      var newElem = document.createElement("div")
      newElem.id = "new_div"  // need another value to make it unique!
      newElem.innerHTML = "I just added a new Div!"
      this.parentNode.appendChild(newElem)
      clickedOnce = true
  }
}
</script>

Edited 12 Years Ago by Taywin

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jckb188 0 Newbie Poster · Answer 1 · 2012-08-17T10:10:41+00:00

Hi and thanks for all of your help. I'm sorry that I have not responded yet, I am trying to get the code figured out...am new to JS but will get through it.

jckb188 0 Newbie Poster · Answer 2 · 2012-08-21T12:20:26+00:00

Taywin that worked great just got it figured out thank you!!!

One other question - do you know how to get the reverse of onclick to work?

var newElem = document.createElement("div") newElem.id = "new_div" // need another value to make it unique! newElem.innerHTML = "I just added a new Div!" this.parentNode.appendChild(newElem)

stbuchok · Answer 3 · 2012-08-21T16:46:59+00:00

He might be talking about blur which is technically the opposite of focus

Taywin 312 Posting Virtuoso · Answer 4 · 2012-08-21T18:11:20+00:00

Well, I don't know... onblur is sort of opposite from onfocus, but the word reverse of onclick is very vauge though...

jckb188 0 Newbie Poster · Answer 5 · 2012-08-22T16:51:41+00:00

Thanks again got it working! I've got one more fun one...in IE I can't get the child to render above the parent for z-index, but it works in chrome, etc. Have tried everything I can think to get the child div to appear above, but nothing is working. Any thoughts? Thanks again for all the help..

Taywin 312 Posting Virtuoso · Answer 6 · 2012-08-22T17:27:16+00:00

It is a bug in IE that it incorrectly renders z-index property. In this blog, some of comments stated somewhat workaround but not an example. What you need to do is to give the parent element a higher z-index value. In other words, assign a high z-index in the element that holds all images in one place.

esma.ramirez 0 Newbie Poster · Answer 7 · 2012-08-22T21:25:56+00:00

Hi, i cannot realize exactly what you wanna do, btw, if you want have more div, you can use append, if you want to display image you can use .HTML, if is not what you wanna do, explane me better or contact in IM :)
Ex:
1) Create New Divs to <body>

<body>
<input type="button" value="New Div" onclick="Javascript:NewDiv();" />
<input type="button" value="Show Image" onclick="javascript:ShowImage();" />
<script type="text/javascript">
function NewDiv(){
$("body").append('<div class="appendeddiv"></div>');
}
function ShowImage(){
$(".appendeddiv").html("<img src='#URLIMG' />");
}
</script>
</body>

Anyway i don't think to understood your question :) I'm available in IM :)

jckb188 0 Newbie Poster · Answer 8 · 2012-08-24T00:53:39+00:00

For the function, if I have the onclick function embedded in each image, is there a way to call the image id from the onclick function?

<img id='$phpvariable' style="z-index:1" src="http://www.domain.com/images/edit1.png" onclick="changeImg.call(this)"/>

Can you tell me if I have this all boggled up? I need to pass a php variable with a form submit that I have now entered into the function you've created, but that server-side vs client-side is getting me all messed up.

Here is the modifications that I have made to your code:

else {  // never click before, create
var newElem = document.createElement("div")
newElem.id = "new_div" // need another value to make it unique!
newElem.innerHTML = '<form value="<?php echo "$phpvariable";?>" action="submit.php" method="post" style="z-index:9999; padding-left:10%; position:absolute; left:-25px; width:120%; background:#FFFFFF; border:1px solid #e7e7e7"><br>A: <input type="text" name="a" /><br><br>B: <input type="text" height="40px" name="b" /><br>C: <input type="text" height="40px" name="c" /><input type="submit" value="Submit"/></form>'
this.parentNode.appendChild(newElem)
clickedOnce = true

Taywin 312 Posting Virtuoso · Answer 9 · 2012-08-24T13:24:50+00:00

If you pass in the image element itself (as you did in your HTML above), then yes. But remember to change your function prototype...

// instead of...
function changeImage() { ... }
// change it to
function changeImage(imgObj) { ... }

Once you change the calling type, the imgObj will become the image element. You could try it out...

function changeImage(imgObj) {
  ...
  if (imgObj) { alert(imgObj.id) }
}