Jump to content

Form-submitted captions below form-submitted images


paulmo

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>

 

Link to comment
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. 

Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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);

 

Link to comment
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
Link to comment
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);

 

Link to comment
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
Link to comment
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. 

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...