Jump to content
paulmo

Form-submitted captions below form-submitted images

Recommended Posts

Hello, captions need to appear below each form-submitted URL image in tile fashion on the page. I'm trying various things here and it's not happening. Live example here. Thanks in advance to team W3.

<!DOCTYPE html>
<html>
<head>
<title>appendChild Gallery</title>

<style>
body {
font-family: Sans-Serif;
font-size: medium;
padding: 20px;
}
caption: {
	caption-side: bottom;
}
</style>

</head>

<body>

<form action="#">

URL:
<input type="text" name="image" id="idImage" value="" onClick="this.select();"/>
<br><br>
Description:
<input type="text" name="des" id="idDes" value="" onClick="this.select();"/>
<br><br>
<input type="button" id="btn" name="submit" value="Load" />
<br><br>
</form>
	
<script>
	document.getElementById('btn').onclick = function() {
	
		//image
		var val = document.getElementById('idImage').value;
		var img = document.createElement('img');
		src = val,
		img.src = src;
		document.body.appendChild(img);
		img.style.width = "150px";
		img.style.height = "150px";
		img.style.padding = "10px";
		img.style.float = "left";
		img.style.margin = "0px, 50px"; 
      
		//description: this is the part that needs help. 
		var valDes = document.getElementById('idDes').value;
		var des = document.createElement('P'); //also tried 'CAPTION' per specs
		src = valDes,
		des.src = src;
		//valDes.body.appendChild(des); //error "is not a function" ??
		//des.setAttribute('label', valDes);
		//des.setAttribute('style', 'width: 150px;');
		//document.getElementById("description").appendChild(des);
		var tex = document.createTextNode(valDes);
		description.appendChild(tex);
		description.style.display = 'inline-block';
		//description.style.position = 'absolute'; 
		des.style.float = 'left';		
		des.style.width = "150px";
		des.style.height = "160px";
		des.style.padding = "10px";  
		
/* integrate localStorage 
		localStorage.setImage('idDes', valDes);
		localStorage.setImage("idImage", val);
		
		imgStore = localStorage.getImage("idImage");
		desStore = localStorage.getImage("idDes");
		img1 = document.createElement('img1');
		img1.src = imgStore; //stored image
		//desStore.src = desStore;
		document.body.appendChild(img1);
		document.getElementById('caption2').innerHTML = document.getElementById('desStore');
*/
        }
</script>

<p id="description"></p>

</body>

</html>

 

Share this post


Link to post
Share on other sites

I don't see an issue on the example page you showed, what is it doing now and what did you expect it to do?

Share this post


Link to post
Share on other sites
15 minutes ago, Ingolme said:

I don't see an issue on the example page you showed, what is it doing now and what did you expect it to do?

Hi, the captions need to be under (below) the images, as mentioned in first post. Thanks. 

Share this post


Link to post
Share on other sites

The image is floated to the left, so all the rest of the content will be on the right of it. You should remove the float property from the image and wrap the image and paragraph into another element.

Share this post


Link to post
Share on other sites

Hi, so I've removed float property and wrapped the image and paragraph into an element together, but I wouldn't know how to wrap them in another element since they're both already rendered on the page, and document.createElement only accepts 1 parameter.

Anyhow, my attempt is below. Thanks for any help.  

        document.getElementById('btn').onclick = function() {
	
		//image
		var val = document.getElementById('idImage').value;
		var img = document.createElement('img');
		src = val, //must redefine
		img.src = src;
		var imgOut = document.body.appendChild(img);

		img.style.width = "150px";
		img.style.height = "150px";
		img.style.padding = "10px";
		//img.style.float = "left";
		img.style.margin = "0px, 50px"; 

		//description
		var valDes = document.getElementById('idDes').value;
		var des = document.createElement('P'); //also tried 'CAPTION' per specs
		src = valDes,
		des.src = src;
		//valDes.body.appendChild(des); //error "is not a function" ??
		//des.setAttribute('label', valDes);
		//des.setAttribute('style', 'width: 150px;');
		//document.getElementById("description").appendChild(des);
		var tex = document.createTextNode(valDes);
		
		var texOut = description.appendChild(tex);

		var combine = document.createElement('imgOut'.'texOut'); //trying this idea...doesn't work. 
		document.body.appendChild(combine);

		description.style.display = 'inline-block';
		//description.style.position = 'absolute'; 
		//des.style.float = 'left';		
		des.style.width = "150px";
		des.style.height = "160px";
		des.style.padding = "10px";  

 

Edited by paulmo
clarification

Share this post


Link to post
Share on other sites

Here's how you created nested elements:

/* Create a container */
var container = document.createElement("div");

/* Create children */
var image = document.createElement("img");
//... Set attributes
var paragraph = document.createElement("p");
// ... Set attributes and content


/* Add children to the container */
container.appendChild(image);
container.appendChild(paragraph);

/* Add the container to the body */
document.body.appendChild(container);

 

  • Like 1

Share this post


Link to post
Share on other sites

Updated code, same behavior. Thanks for guidance.

document.getElementById('btn').onclick = function() {
    
        //image
        
        var container = document.createElement("div");

        var val = document.getElementById('idImage').value;
        var img = document.createElement('img');
        src = val, 
        img.src = src;

        img.style.width = "150px";
        img.style.height = "150px";
        img.style.padding = "10px";
        //img.style.float = "left";
        img.style.margin = "0px, 50px"; 

        //description
        var valDes = document.getElementById('idDes').value;
        var des = document.createElement('p');
        src = valDes,
        des.src = src;
        
		var tex = document.createTextNode(valDes);

        des.style.display = 'inline-block';
        des.style.position = 'absolute'; 
        des.style.top = '0px';        
        des.style.left = '0px';
        //des.style.height = "150px";
        //des.style.padding = "10px";  
        
		container.appendChild(img);
        container.appendChild(des); //also tried tex
        document.body.appendChild(container);

 

Share this post


Link to post
Share on other sites

des is a paragraph, but a paragraph does not have or use a src attribute?

des.src = src;

It is bad idea to use position: absolute; because it taken out of the flow from the other elements and it occupies no space, unless you have a parent element with position: relative thr property top will take it to the closest position relative parent element, and if none found the top edge of browser window.

If I was you I would do the html first to get it how you want, apply classnames and style it to those classnames.

Then create the same layout using JavaScript adding same classname, you avoid adding all individual style properties that way, as the classnames will take care of that.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

You have to append text node(tex) to des the created paragraph, then append des( which now has textnode within it) to div container

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Thanks, same behavior with these edits:

	document.getElementById('btn').onclick = function() {
	
		//image
		
		var container = document.createElement("div");

		var val = document.getElementById('idImage').value;
		var img = document.createElement('img');
		src = val, 
		img.src = src;
		//document.body.appendChild(img);

		img.style.width = "150px";
		img.style.height = "150px";
		img.style.padding = "10px";
		//img.style.float = "left";
		img.style.margin = "0px, 50px"; 

		//description
		var valDes = document.getElementById('idDes').value;
		var des = document.createElement('p'); 
		var tex = document.createTextNode(valDes);

		des.style.display = 'inline-block';
		des.style.top = '0px';		
		des.style.left = '0px';
		des.style.height = "160px";
		des.style.padding = "10px";  
		
		des.appendChild(tex); //also tried tex.appendChild(des);
		container.appendChild(img);
		container.appendChild(des);
		//container.appendChild(tex); also tried this
		document.body.appendChild(container);

 

Share this post


Link to post
Share on other sites

Misplaced ',' instead of ' ' in margin styling, and ending semi-colon ';' for 'src = val'


            document.getElementById('btn').onclick = function() {
                var container = document.createElement("div");
                container.style.maxWidth = "270px"; /* just for testing purposes  dsonesuk*/
                container.style.backgroundColor = "red"; /* just for testing purposes  dsonesuk*/
				container.style.display = "inline-block"; /* just for testing purposes  dsonesuk*/
				container.style.verticalAlign = "top"; /* just for testing purposes  dsonesuk*/
                //image
                var val = document.getElementById('idImage').value;
                var img = document.createElement('img');
                src = val; /* replaced ',' with ';' dsonesuk */
                img.src = src;
                //document.body.appendChild(img);

                img.style.width = "150px";
                img.style.height = "150px";
                img.style.padding = "10px";
                //img.style.float = "left";
                img.style.margin = "0px 50px"; /* removed ',' dsonesuk*/

                //description
                var valDes = document.getElementById('idDes').value;
                var des = document.createElement('p');
                var tex = document.createTextNode(valDes);

                des.style.display = 'block';
                des.style.backgroundColor = "green"; /* just for testing purposes dsonesuk*/
                /* des.style.top = '0px';
                 des.style.left = '0px'; removed because obsolete without position used  dsonesuk*/
                des.style.height = "160px";
                des.style.padding = "10px";

                des.appendChild(tex); //also tried tex.appendChild(des);
                container.appendChild(img);
                container.appendChild(des);
                //container.appendChild(tex); also tried this
                document.body.appendChild(container);
            };

With css and class Name

<style type="text/css">
            .img_descrip_wrap {
                display: inline-block;
                max-width: 270px;
                vertical-align: top;
            }
            .img_descrip_wrap img {width:150px; height: 150px; padding:10px; margin: 0 50px; display: block;}
        </style>
  document.getElementById('btn').onclick = function() {

                //image

                var container = document.createElement("div");
                container.className = "img_descrip_wrap";
                var val = document.getElementById('idImage').value;
                var img = document.createElement('img');
                src = val;
                img.src = src;


                //description
                var valDes = document.getElementById('idDes').value;
                var des = document.createElement('p');


                var tex = document.createTextNode(valDes);
                des.appendChild(tex);

                container.appendChild(img);
                container.appendChild(des);
                document.body.appendChild(container);
            };

 

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

Thanks so much!  It's working great with your revision, and I'll play with the background color section.

Question please: can commented sections /* */ and // interfere with code executing? Because code wasn't executing until I deleted those sections. 

Share this post


Link to post
Share on other sites

It shouldn't if done correctly, you may have an instance where part of code got caught by the commenting, but a good editor would show that, and should have highlighted your previous errors.

Share this post


Link to post
Share on other sites

gedit doesn't show much in the way of errors, I'm using Chrome(ium) developer console which shows everything. What's the preferred editor here? Thanks

Share this post


Link to post
Share on other sites

I use Netbeans, because its not limited to just 1 or two server languages, but several, including frameworks Zend, smarty, Laravel, Java etc, It gives you traffic light indication to highlight errors in red and warnings in amber, it gives hints, in indicates what closing braces elements belong to. There is also Sublime, but I found Netbeans gives me what I want, and the ability to add more if I want.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks, researching options, I just installed Visual Studio Code and already enjoying auto-completion.

Edited by paulmo
clarity

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...

×
×
  • Create New...