I want to add rows dynamically in a HTML table and the number of the column should be fixed. After adding rows I want to input some text values in each row and column. After entering the text values I want to store it in a database table. How to do that? Here is my code
function addRow() {
var root = document.getElementById('mytab').getElementsByTagName('tbody')[0];
var rows = root.getElementsByTagName('tr');
var clone = cloneEl(rows[rows.length - 1]);
root.appendChild(clone);
}
function addColumn() {
var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone;
while (r = rows[i++]) {
c = r.getElementsByTagName('td');
clone = cloneEl(c[c.length - 1]);
c[0].parentNode.appendChild(clone);
}
}
function cloneEl(el) {
var clo = el.cloneNode(true);
return clo;
}
#mytab td {
width: 100px;
height: 20px;
background: #cccccc;
}
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form action="">
<input type="button" value="Add a Row" onclick="addRow()">
<input type="button" value="Add a Column" onclick="addColumn()">
</form>
<br>
<table id="mytab" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="enter1"></td>
<td><input type="text" name="enter2"></td>
</tr>
</table>
</body>
</html>
In this code, the problem is when I enter some text and after that, I add rows or column the same text appears in the newly added rows and column. But I want to enter different text in different boxes and I want the no of the column should be fixed to say no of the column should be 5.
Updated
Hi, you have to clear input values after cloning elements, as below. cleanUpInputs(clone); will check cloned DOM and will remove input values. Check the code below.
function addRow() {
var root = document.getElementById('mytab').getElementsByTagName('tbody')[0];
var rows = root.getElementsByTagName('tr');
var clone = cloneEl(rows[rows.length - 1]);
cleanUpInputs(clone);
root.appendChild(clone);
}
function addColumn() {
var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone;
while (r = rows[i++]) {
c = r.getElementsByTagName('td');
clone = cloneEl(c[c.length - 1]);
cleanUpInputs(clone);
c[0].parentNode.appendChild(clone);
}
}
function cloneEl(el) {
var clo = el.cloneNode(true);
return clo;
}
function cleanUpInputs(obj) {
for (var i = 0; n = obj.childNodes[i]; ++i) {
if (n.childNodes && n.tagName != 'INPUT') {
cleanUpInputs(n);
} else if (n.tagName == 'INPUT' && n.type == 'text') {
n.value = '';
}
}
}
#mytab td {
width: 100px;
height: 20px;
background: #cccccc;
}
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form action="">
<input type="button" value="Add a Row" onclick="addRow()">
<input type="button" value="Add a Column" onclick="addColumn()">
</form>
<br>
<table id="mytab" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="enter1"></td>
<td><input type="text" name="enter2"></td>
</tr>
</table>
</body>
</html>
Related
I'm trying to create a list based off of 2 input fields. The first input will be a name and the second an integer.
What I'm trying to achieve is having the name displayed multiplied by the amount of the input integer. I have got the name to display based off the input, but have been unable to have it displayed multiple times based on the input integer.
Here's an example image of what I'm looking to achieve
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
Fiddle: https://jsfiddle.net/grnct2yz/
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="number" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
for(let i = 0; i < document.getElementById("count").value; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
I have added a loop and changed the input type to number so we are sure that it's going to insert a number in the loop. Is this what you wanted?
What the code I added does is cycling a number of times equal to the number inputted and then executing the code you wrote.
for loops work this way:
you set an initial statement that is executed at the beginning of the loop, only once (let i = 0 sets a new iterable variable i),
then you set a condition that is checked before every iteration of the loop to make it run (i < document.getElementById("count").value checks that it executes up to and not more than X times, where X is the number inputted),
then you set an operation to be executed at the end of each loop (i++ increments the value of i by one).
Here is another way of doing it:
const name=document.getElementById("name"),
count=document.getElementById("count"),
list=document.getElementById("list");
document.getElementById("add").onclick = function() {
list.insertAdjacentHTML("beforeend",[...Array(+count.value)].map(s=>`<div>${name.value}</div>`).join(""))
name.value = ""; // clear the value
}
<input type="text" value="Michael" id="name" /><br>
<input type="text" value="5" id="count" /><br>
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
Just your Improved code based on your needs we can achieve this in many ways.
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var count = document.getElementById("count").value;
if (parseInt(count) != 'NaN') {
var list = document.getElementById("list");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
count = parseInt(count);
for (var i = 0; i < count; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
}
}
</script>
</body>
</html>
I have it so you type in on a form a maximum number then it creates a table after clicking a button.
I want it so after you click the button to add the row it writes a drop down menu in the table that goes from 0 to the number you put in the form
This is my HTML code:
<html>
<head>
<title>Form Generator</title>
<link rel="stylesheet" type="text/css" href="../css/converter.css"/>
<script language="JavaScript" src="../js/exercise2.js" type="text/javascript">
</script>
</head>
<body>
<p>
<button class="button" data-modal="M2KM">Form Generator</button>
</p>
<div id="M2KM" class="modal">
<div class="modal-content">
<div class="form">
<a class="close">×</a>
<form action="">
<textarea rows="1" name="Section" id="Section" cols="10">Section</textarea>
<textarea rows="1" name="Max" id="Max" cols="10">Max</textarea>
<textarea rows="1" name="Comment" id="Comment" cols="10">Comment</textarea>
<textarea rows="1" name="Mark" id="Mark" cols="10">Mark</textarea>
<input type="button" value="Add Row" name="Add Row" onclick="conversionTable('table')" />
<input type="reset" value="Clear" name="Clear">
</form>
<div id="conversion">
<table id="table">
<thead>
<tr>
<th>Section</th>
<th>Max</th>
<th>Comment</th>
<th>Mark</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
This is my JavaScript Code:
function conversionTable(tagId, from, to)
{
var section = document.getElementById("Section").value;
var max = document.getElementById("Max").value;
var comment = document.getElementById("Comment").value;
var mark = document.getElementById("Mark").value;
from = 0;
to = 1;
var total = 0;
var arr = [];
var conv = document.getElementById(tagId) ;
var pre = document.createElement("pre");
conv.appendChild(pre);
var body= conv.appendChild(document.createElement("tbody"));
for (var i=from; i<to; i++)
{ row = body.appendChild(document.createElement("tr"));
var data=row.appendChild(document.createElement("td"));
data.appendChild(document.createTextNode(section));
data=row.appendChild(document.createElement("td"));
data.appendChild(document.createTextNode(max));
var data=row.appendChild(document.createElement("td"));
data.appendChild(document.createTextNode(comment));
data=row.appendChild(document.createElement("select"));
data.setAttribute("id", "mySelect");
row.appendChild(data);
var z = document.createElement("option");
z.setAttribute("value", "volvocar");
var t = document.createTextNode("1");
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
total = total + mark;
var obj = {section: section, max: max, comment: comment, mark: mark};
arr.push(obj);
}
}
This is a screenshot showing test data:
Here's a simplified example that adds a select element with a number of options equal to the number entered by the user.
See comments in the code for an explanation of how it works.
// Identifies existing HTML elements
const maxInput = document.getElementById("max");
const button = document.getElementById("button");
const table = document.getElementById("table");
// Calls `addDropdown` when `button` is clicked
button.addEventListener("click", addDropdown);
// Defines the event listener
function addDropdown(event) { //(`event` object is available if we want it)
// Gets value from input
let max = parseInt(maxInput.value);
// Exits function early if maxInput doesn't have a number
if(!max){ return; }
// Defines the new elements
const row = document.createElement("tr");
const cell = document.createElement("td");
const dropdown = document.createElement("select");
// Enumerates options and adds them to the select element
let optNumber = -1;
while(++optNumber <= max){
let optionElement = document.createElement("option");
optionElement.value = "opt" + optNumber;
optionElement.innerHTML = "Option " + optNumber;
dropdown.appendChild(optionElement);
}
// Adds the elements to the page
cell.appendChild(dropdown);
row.appendChild(cell);
table.appendChild(row);
}
<label>
<span>Enter maximum value for dropdown:</span>
<input id="max" value="5" />
</label>
<br />
<button id="button">Add Dropdown in New Row</button>
<div id="container">
<table id="table"></table>
</div>
I have a function that shades every other row in a cell, but can't figure out how to get it so when the button is clicked again, the cells get un-shaded. I'd also like it to not select the first row with the row headers. Any ideas would be appreciated!
$(document).ready(function() {
$('#nbrTxt').focus();
function addItem() {
var value = $('#nbrTxt').val();
var usrName = prompt("Name?");
for (var i = 1; i <= value; i++) {
$('table').append('<tr><td></td><td></td></tr>');
$('table tr:last td:first').html(i);
$('table tr:last td:last').html(usrName);
$(this).focus().select();
};
};
$('#btnGo').click(addItem);
$('#nbrTxt').keydown(function(e) {
if (e.which === 13)
addItem();
})
$(document).on('click', '#shade', function() {
$('tr:even').css('background', '#A0A0A0');
})
$(document).on('click', '#drkLine', function() {
if ($('#nbrTxt').val() % 10 === 0) {
($('#nbrTxt').val()).css('textDecoration', 'line-through');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>JQuery Selector</title>
<style type="text/css">
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script src="jqueryselector.js"></script>
</head>
<body>
<h1>JQuery Selector</h1>
Enter Number:
<input type="number" name="nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo" />
<div id='buttons'>
<input type="button" value="Shade Even Rows" id="shade" />
<input type="button" value="Show Dark Line Every 10 Rows" id="drkLine" />
</div>
<table id="table" width="500" border="1">
<tr>
<td>No. Count</td>
<td>Name</td>
</tr>
</table>
</body>
</html>
Add class shade in your style and use toggleClass() function to add/remove it, check example bellow.
If you don't want to select the first row you can use :not(:first-child) :
$('tr:not(:first-child):even')
Hope this helps.
Snippet
$(document).ready(function() {
$('#nbrTxt').focus();
function addItem() {
var value = $('#nbrTxt').val();
var usrName = prompt("Name?");
$('table>tbody').empty();
for (var i = 1; i <= value; i++) {
$('table').append('<tr><td></td><td></td></tr>');
$('table tr:last td:first').html(i);
$('table tr:last td:last').html(usrName);
$(this).focus().select();
};
};
$('#btnGo').click(addItem);
$('#nbrTxt').keydown(function(e) {
if (e.which === 13)
addItem();
})
$(document).on('click', '#shade', function() {
$('tr:not(:first-child):even').toggleClass('shade');
})
$(document).on('click', '#drkLine', function() {
if ($('#nbrTxt').val() % 10 === 0) {
($('#nbrTxt').val()).css('textDecoration', 'line-through');
}
})
});
tr.shade{
background: #A0A0A0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JQuery Selector</h1>
Enter Number:
<input type="number" name="nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo" />
<div id='buttons'>
<input type="button" value="Shade Even Rows" id="shade" />
<input type="button" value="Show Dark Line Every 10 Rows" id="drkLine" />
</div>
<table id="table" width="500" border="1">
<thead>
<tr>
<td>No. Count</td>
<td>Name</td>
</tr>
</thead>
</table>
I am required to write the code using three files, Javascript, HTML, and CSS. I am not sure what is the problem in my code, please help me find the error. The user is to write the range in two textareas and when a button is clicked convert all values starting from the first given number up to the second given number. This is what I have written so far:
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/converter.css"/>
<title>Celsius to Fahrenheit Converter</title>
<script language="JavaScript" src="../js/c2f.js" type="text/javascript">
</script>
</head>
<body>
<h2>Miles to Kilometers Converter</h2>
<form action="">
<p>
<textarea rows="1" name="Input1" id="Input1" cols="10"></textarea>
<textarea rows="1" name="Input2" id="Input2" cols="10"></textarea>
<input type="button" value="Convert" name="B3" onclick="conversionTable()">
<input type="reset" value="Clear" name="B2">
</p>
</form>
<div id="conversion">
</div>
</body>
</html>
JavaScript code:
function conversionTable(tagId, from, to)
{
var first = document.getElementById("Input1");
var second = document.getElementById("Input2");
from =first;
to = second;
var conv = document.getElementById(tagId);
var tab = document.createElement("table");
var bod = document.createElement("tbody");
var thed = document.createElement("thead");
tab.appendChild(thed);
tab.appendChild(bod);
var tr = document.createElement("tr");
thed.appendChild(tr);
var th = document.createElement("th");
tr.appendChild(th);
th.appendChild(document.createTextNode("Miles"));
th = document.createElement("th");
tr.appendChild(th);
th.appendChild(document.createTextNode("Kilometers"));
conv.appendChild(tab);
for(var i=from; i<=to; i++){
tr = document.createElement("tr");
if (i%2==0)
tr.setAttribute("class", "even");
else
tr.setAttribute("class", "odd");
bod.appendChild(tr);
td = document.createElement("td");
tr.appendChild(td);
td.appendChild(document.createTextNode(i));
td = document.createElement("td");
tr.appendChild(td);
td.appendChild(document.createTextNode(c2f(i)));
}
function c2f(c) {return Math.round((c * 1.6093)*10)/10}
}
CSS code:
h2{text-align:center; color:blue; background: #EFEFEF}
body{margin: 4em; width: 400px}
table{margin: 2em; padding: 1em;}
th{background: #EFEFFF}
tr.even {background: #B8B8B8}
tr.odd {background: #E0FFFF}
So again, I am trying to pass the two variables (first and second) into my conversionTable() function.
DEMO HERE
Changes to your html:
<input type="button" value="Convert" name="B3" onclick="conversionTable('conversion')" />
Changes to your js:
from = parseInt(first.value);
to = parseInt(second.value);
and thats it. It should work to what you're looking for.
An exmaple of using plain javascript to build the conversion table:
<form action="">
<p>
<textarea rows="1" name="Input1" cols="10"></textarea>
<textarea rows="1" name="Input2" cols="10"></textarea>
<input type="button" value="Convert" name="B3" onclick="buildConversionTable(this);">
<input type="reset" value="Clear" name="B2">
</p>
</form>
<div id="conversion"></div>
<script>
// Convert miles to kilometres, round to 2 places
function m2k(c) {
return (c * 1.6093).toFixed(2); // returns a string
}
// Return a new element with provided tag name and properties
function newElement(tagName,props) {
var el = document.createElement(tagName);
if (props) {
for (var prop in props) {
if (props.hasOwnProperty(prop)) {
el[prop] = props[prop];
}
}
}
return el;
}
// Return a new text node with text as content
function newText(text) {
return document.createTextNode(text);
}
// Create the conversion table
function buildConversionTable(button) {
var form = button.form;
var from = form.Input1.value;
var to = form.Input2.value;
// Use a temporary element to build the tabel from HTML
var d = document.createElement('div');
d.innerHTML = '<table><thead><tr><th>Miles<th>Kilometres</thead></table>';
var table = d.getElementsByTagName('table')[0];
// Tables always have at least one tbody, no need for tags in the HTML
var tbody = table.tBodies[0]
// Use the convenience of appendChild returning the appended element
for (var i=from, row, cell; i<=to; i++) {
row = tbody.appendChild(newElement('tr',{className: i%2? 'odd':'even'}));
cell = row.appendChild(newElement('td'));
cell.appendChild(newText(i));
cell = row.appendChild(newElement('td'));
cell.appendChild(newText(m2k(i)));
}
// Add the table to the document
document.getElementById('conversion').appendChild(table);
}
</script>
Oh, forgot about the DOM table methods. The for loop adding the rows can be:
for (var i=from, row, cell; i<=to; i++) {
row = tbody.insertRow(-1);
row.insertCell(-1);
row.insertCell(-1);
row.className = i%2? 'odd':'even';
row.cells[0].innerHTML = i;
row.cells[1].innerHTML = m2k(i);
}
I would recommend using jQuery to solve this problem. To include jquery in your project change your html to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/converter.css"/>
<title>Celsius to Fahrenheit Converter</title>
<script language="JavaScript" src="../js/c2f.js" type="text/javascript">
</script>
<!-- Here is your jquery code includer -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<h2>Miles to Kilometers Converter</h2>
<form action="">
<p>
<textarea rows="1" name="Input1" id="Input1" cols="10"></textarea>
<textarea rows="1" name="Input2" id="Input2" cols="10"></textarea>
<input type="button" value="Convert" id="convert" name="B3" />
<input type="reset" value="Clear" name="B2" />
</p>
</form>
<div id="conversion"></div>
</body>
</html>
Using jQuery you can add the click handler to the convert button and in there calculate the from and to and call the conversionTable function. I have revised the conversionTable function to do what you want in much less code using jQuery.
$("#convert").click(function () {
var from = parseInt($("#Input1").val());
var to = parseInt($("#Input2").val());
conversionTable($("#conversion"), from, to);
});
function conversionTable(tag, from, to) {
//Generate the table with the thead of miles and kilometers
var table = $("<table><thead>" +
"<tr><th>Miles</th><th>Kilometers</th></tr>" +
"</thead><tbody></tbody></table>");
//set the tags innerHtml to the table
tag.html(table);
for (var i = from; i <= to; i++) {
var miles = i;
var kilometers = c2f(i);
//Create a tr with the found miles and kilometers
var tr = $("<tr><td>" + miles + "</td><td>" + kilometers + "</td></tr>");
//Add the tr to the tables tbody
table.find("tbody").append(tr);
}
//Find all of the even and odd tr's and give them the appropriate class
table.find("tr:even").addClass("even");
table.find("tr:odd").addClass("odd");
function c2f(c) {
return Math.round((c * 1.6093) * 10) / 10;
}
}
Your css would stay the same as previously posted. You can find a working jsFiddle at http://jsfiddle.net/FsV3j/.
By default I have 5 textboxes. When a user clicks on a button, one textbox should be added.
How could I do this?
If you replace the innerHTML, the previously entered values will be cleared, to avoid that, you can append the input elements programmatically:
var input = document.createElement('input');
input.type = "text";
//...
container.appendChild(input);
Check this example.
Javascript Function
function add() {
//Create an input type dynamically.
var element = document.createElement("input");
//Create Labels
var label = document.createElement("Label");
label.innerHTML = "New Label";
//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
element.setAttribute("style", "width:200px");
label.setAttribute("style", "font-weight:normal");
// 'foobar' is the div id, where new fields are to be added
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(label);
foo.appendChild(element);
}
Html part,
<button id="button" value="Add" onClick:"javascript:add();">
And, Its done!
<script>
function add()
{
document.getElementById("place").innerHTML="<input type='text' value=''>"
}
</script>
<input type="button" value="clickMe" onClick="add();">
<div id="place"></div>
<script>
function add()
{
var inpt = document.getElementById('input_template');
inpt.parentNode.appendChild(inpt.cloneNode(false));
}
</script>
<input type="button" onclick="add();">
set id=input_template to one of the predefined textboxes
Best would be to attach an event on to the onclick of the button, that will set a div's visibility to inline. This is about the best way I can see for this, considering flexibility and robustness.
Have a look here for example code.
try this
<html>
<head>
<title>Dynamic Form</title>
<script language="javascript" type="text/javascript" >
function changeIt()
{
createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >"
}
</script>
</head>
<body>
<form name="form">
<input type="button" value="clickHere" onClick="changeIt()">
<div id="createTextbox"></div>
</form>
</body>
</html>
by change for loop values we can generate textboxes dynamically
function addFunction() {
var table = document.getElementById("textbox");
var rowlen = table.rows.length;
var row = table.insertRow(rowlen);
row.id = rowlen;
var arr = ['textboxfiledname'];
for (i = 0; i < 2; i++) {
var x = row.insertCell(i)
if (i == 1) {
x.innerHTML = "<input type='button' onclick='removeCell(" + row.id + ")' value=Delete>"
} else {
x.innerHTML = "<label>" + arr[i] + ":</label><input type='textbox' name='" + arr[i] + "'>"
}
}
}
function removeCell(rowid) {
var table = document.getElementById(rowid).remove();
}
input[type=text] {
width: 100%;
height: 50%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-family: sans-serif;
}
input[type=button] {
background-color: #4CAF50;
border: none;
color: white;
padding: 6px 20px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset style="margin-left:20%;margin-right:20%;font-family:sans-serif;padding:15px;border-radius:5px;background:#f2f2f2;border:5px solid #1F497D">
<legend style="background:#1F497D;color:#fff;padding:5px 10px;font-size:22px;border-radius:5px;margin-left:20px;box-shadow:0 0 0 5px #ddd">DynamicTextbox</legend>
<table id="textbox">
<tr>
<td>
<input type="button" onclick="addFunction()" value="AddTextbox" />
</td>
</tr>
</table>
</fieldset>
The best I can help is with this code
<html>
<head>
</head>
<body>
<input type=text id="chat" placeholder="Enter a message..." maxlength="120">
<input type=Button id="Button" value="Test" onClick="T()">
<h1 id="message"></h1>
<script>
function T() {
var m = document.getElementById("chat").value
document.getElementById("message").innerHTML = m
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="myFunction()">Click me!</button>
<script>
var count =0;
function myFunction() {
count++
document.write('Lable1');
document.write('<input type="text" name="one+count">');
document.write('Lable2');
document.write('<input type="text" name="two+count">');
document.write('Lable3');
document.write('<input type="text" name="three+count">');
document.write('Lable4');
document.write('<input type="text" name="four+count">');
document.write(count);
}
</script>
</body>
</html>