PDA

View Full Version : 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
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


<!DOCTYPE html>
<!-- saved from url=(0061)http://profperry.com/Classes20/JQuery/Assignment_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/