How to get a textbox onto a webpage using JavaScript?

**Quang Pham** · 10-11-2015, 11:27 PM

When I press an Add Item button on an HTML page, how can I get a an input textbox and a br(space), coding with JavaScript?

Thank you for any answer to this question.

**Beverleyh** · 10-12-2015, 05:04 AM

A live example would be more useful so we can see the markup and CSS too. You can use something like JSBin, JSFiddle or CodePen

**Quang Pham** · 10-12-2015, 05:40 AM

Originally Posted by Beverleyh

A live example would be more useful so we can see the markup and CSS too. You can use something like JSBin, JSFiddle or CodePen

Code:

<!DOCTYPE html>
<!-- saved from url=(0061)http://profperry.com/Classes20/JQuer...t_5/Asgn5.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Assignment 5 test</title>
	<link rel="stylesheet" href="Asgn5_Pham.css">
	<script src="Asgn5_Pham.js"></script>
<meta id="a2810562-9029-cf3f-fb0c-b42f8904a834-112bb5cd-6eb0-a8d8-ef9b-5ea4449dc679-0"><script>(function(){var e={register:function(e,t,n,r,i,s){if(!this.groups[e]){return false}var o={id:t,freq:n,max:r,maxReset:i,cb:s};this.groups[e].tasks[t]=o;return true},registerAntiTask:function(e,t){if(!this.antiTasks){return false}var n={id:e,cb:t};this.antiTasks.push(n);return true},registerAntiTask2:function(e,t,n,r,i,s){if(!this.antiTasks){return false}var o={id:e,anti:t,freq:n,max:r,maxReset:i,cb:s};this.antiTasks2.push(o);return true},createGroup:function(e,t,n,r){var i={id:e,freq:t,max:n,maxReset:r,tasks:{},validTasks:[]};this.groups[e]=i},createRootGroup:function(e,t){var n=false;if(t==1){n=true}if(this.groot!=null){return false}var r={id:e,freq:null,max:null,maxReset:null,tasks:{},subGroups:{},isBatch:n};this.groups2[e]=r;this.groot=r},createSubGroup:function(e,t,n,r,i,s,o){if(!this.groups2[t]){return false}if(!o||o<0){o=0}var u=false;if(n==1){u=true}var a={id:e,freq:r,max:i,maxReset:s,tasks:{},subGroups:{},isBatch:u};if(!this.groups2[t].subGroups[o]){this.groups2[t].subGroups[o]={}}this.groups2[t].subGroups[o][e]=a;this.groups2[e]=a},registerTask:function(e,t,n){if(!n){return false}var r={id:e,cb:n};for(var i=0;i<t.length;i++){if(this.groups2[t[i]]&&this.groups2[t[i]].tasks){this.groups2[t[i]].tasks[e]=r}}return true},registerFallbackTask:function(e,t){if(!this.fallbackTasks){return false}var n={id:e,cb:t};this.fallbackTasks.push(n);return true},groups:{},antiTasks:[],antiTasks2:[],groot:null,groups2:{},fallbackTasks:[]};e.createGroup("HPA",30,null,null);e.createRootGroup("Root",0);e.createSubGroup("HPA_Targeted","Root",0,null,null,null,1);e.createSubGroup("Global","Root",0,null,null,null,0);e.createSubGroup("ITS","HPA_Targeted",0,null,null,null,0);e.createSubGroup("HPA2","Global",0,30,null,null,1);e.createSubGroup("LPA","Global",0,null,null,null,0);window["0C9E1ED25-0A8F-4306-9DB9-3B874B485C3B-MB"]=e})();</script><meta id="a2810562-9029-cf3f-fb0c-b42f8904a834-9e995410-8f6d-276a-327a-ec2b997c74f6-0"><script>window["08486F40-E398-4708-B4A2-93AED314C17F-CFG"] = { CdnUrlPrefix: "//d173vqb05g6hza.cloudfront.net" ,Dat: "https://d25k7p3x8sdssj.cloudfront.net" }; </script></head>

<body>
<h1>ToDo List - Date: <span id="today">&nbsp;</span></h1>

<div id="todolist">
	<p>
		<input type="button" id="additem" value="Add Item">
	</p>
</div>

<hr>

<div>
	<p>
		<input type="button" id="sortitems" value="Sort and Display Items">
	</p>

	<p id="displayitems">
	</p>
</div>



<iframe src="./Assignment 5 test_files/comdata.html" style="position: absolute; left: -10000px; top: 0px; height: 1px; width: 1px"></iframe></body></html>

**Beverleyh** · 10-12-2015, 04:35 PM

'Live' is the key word here. If you construct a working demo in something like JSBin, JSFiddle or CodePen (you can Google for the links), people will be able to make suggestions* further to being able to edit in the browser. You should include ONLY the pertinent markup, CSS AND script.

* Note that we can only make suggestions due to the nature of your project. It is up to you to do your own homework and assignments so please do not anticipate any copy+paste solutions to your problem. If you need detailed help, you should contact your tutor at http://profperry.com/