I am trying to get my function to display its executed code inside a div or a table.
At the moment the code is executed and displayed at the top of the page. I want it to display on a specific area on my page. how do i do this?
Here is my external scripts code, called "SquareScript.js":
function Display()
{
var a = document.getElementById("value1").value;
var b = document.getElementById("value2").value;
for(var i = 0; i < a; i++)
{
document.getElementById("Paragraph").innerHTML += " " +
document.getElementById("myValue").value;
}
document.getElementById("Paragraph").innerHTML += "<br>";
for (var r = 0; r < b; r++)
{
document.getElementById("Paragraph").innerHTML += " " +
document.getElementById("myValue").value;
for(var p = 0; p < a-2; p++)
{
document.getElementById("Paragraph").innerHTML += "   ";
}
document.getElementById("Paragraph").innerHTML += " " +
document.getElementById("myValue").value;
document.getElementById("Paragraph").innerHTML += "<br>";
}
for(var i = 0; i < a; i++)
{
document.getElementById("Paragraph").innerHTML += " " +
document.getElementById("myValue").value;
}
}
My code generates a square on the page with the height and width that the user entered, also using the character the user entered.
Here is my main webpages code:
<head>
<link rel = "stylesheet" type = "text/css" href = "Assignment3.css">
<style>
table {background-color:black;color:white; align: center;}
body {background-image: url('squares.png');}
</style>
</head>
<title>Generate A Square</title>
<body>
<p Id="Paragraph"></p>
<div class = "heading">
<h1><img src = "Interested.png" width = 100px height = 100px></img>WELCOME TO BUILD A SQUARE</h1>
</div>
<table align = center>
<tr>
<td>
Please Enter value number 1:  <input type = "text" id = "value1">
</td>
</tr>
<tr>
<td>
Please Enter value number 2:  <input type = "text" id = "value2">
</td>
</tr>
<tr>
<td>
Enter a character for your square's border:  <input type="text" Id="myValue"> </input>
</td>
</tr>
<tr>
<td>
<button onclick="Display()">Display</button>
</td>
</tr>
</table>
<div style = "margin-left: 45%;">
<button><a href = "MainMenu.html">Return To Main Menu</button>
<script src = "SquareScript.js" ></script>
</div>
</body>
as you can see i call my external script inside tags after my table. But it still displays at the top of the page.
What can I do to display my executed script inside the div tag which i put it in?
Thanks for any help or any suggestions!
Your script generates the square and places it inside
<p Id="Paragraph"></p>
To move the square to the div where you have the script tag, move the existing <p Id="Paragraph"></p> below the script tag. the div code will be
<div style = "margin-left: 45%;">
<button><a href = "MainMenu.html">Return To Main Menu</button>
<script src = "SquareScript.js" ></script>
<p Id="Paragraph"></p> <!-- move this p tag here -->
</div>
Related
I am making a web page using HTML and js following is the code for that,
essentially I want to store the numbers generated by function and show it in column 6, so I am storing it in the array a and show it in column 6. But when I write to add the number for loop stops right there and control exits from the loop. ie. only one row and one column is displayed like
uid day time source destination bus
2
rand.html
<!DOCTYPE html>
<head>
<script type="text/javascript">
var abc = 0;
a = new Array();
var b = 0;
//Returns a random number
function CreateLottoValues()
{
return Math.floor(Math.random() * 20 + 1);
}
//create table
function UpdateTable()
{
document.write("<table border=1 id='myTable' > ")
document.write(" <tr><td > uid</td><td > day</td><td
> time</td><td > source</td><td > destination</td> <td
> bus</td></tr> ")
for (row=2; row<=30; row++) {
document.write("<tr>")
for (col=1; col<=6; col++) {
if(col==1){
document.write("<td >" +row+ "</td>")
}
else if(col==6){
for (var i = 0; i <= a.length; i++) {
document.write("<td>" + a[i] +"</td>")
}
}
else{
abc = CreateLottoValues();
a.add(abc);
//tmp =row + col;
//document.getElementById(tmp).innerHTML = CreateLottoValues();
document.write("<td >" + abc + "</td>")
}
}
document.write("</tr>")
}
document.write("</table>")
}
</script>
</head>
<body>
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
<p id="demo"></p>
</div>
</div>
<input id="btn" type="button" value="Re-generate Numbers"
onClick="UpdateTable()" />
</center>
</body>
</html>
Can anyone help me? thank you for your suggestions.
On closer inspection, I found that your program won't run correctly because of this line:
a.add(abc);
This is because the variable a is an array, and to add elements to an array you use the push function
Replace a.add(abc) with a.push(abc). I've also made a few other changes which you can understand by comparing this with your code:
<!DOCTYPE html>
<head>
<script type="text/javascript">
var abc = 0;
a = new Array();
var b = 0;
//Returns a random number
function CreateLottoValues()
{
return Math.floor(Math.random() * 20 + 1);
}
//create table
function UpdateTable()
{
document.write("<table border=1 id='myTable' > ")
document.write(" <tr><td > uid</td><td > day</td><td> time</td><td > source</td><td > destination</td> <td> bus</td></tr> ")
for (row=2; row<=30; row++) {
document.write("<tr>")
for (col=1; col<=6; col++) {
if(col==1){
document.write("<td >" +row+ "</td>")
}
else if(col==6){
document.write("<td>");
for (var i = 0; i < a.length; i++) {
document.write(a[i])
}
document.write("</td>");
a = new Array();
}
else{
abc = CreateLottoValues();
a.push(abc);
//tmp =row + col;
//document.getElementById(tmp).innerHTML = CreateLottoValues();
document.write("<td >" + abc + "</td>")
}
}
document.write("</tr>")
}
document.write("</table>")
}
</script>
</head>
<body>
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
<p id="demo"></p>
</div>
</div>
<input id="btn" type="button" value="Re-generate Numbers"
onClick="UpdateTable()" />
</center>
</body>
</html>
I made a table that you can add text to and edit it inside it.
However if you add more than three rows, It is stuck and not working anymore.
The errors comes from here:
document.getElementById('vda' + z).addEventListener('click', doSomething);
document.getElementById('cvda' + z).addEventListener('click', doSomething2);
It is only adding event listener to the last row added, so if you add more than one row. The not last row won't have a working edit button.
I checked the IDs by inspecting the edit and update buttons elements.
Try adding 3 rows then click on the edit button for one of the row.
you can look at the code here and also https://jsfiddle.net/3e6d4qsv/
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<div style="display:inline-flex;">
<form id="myForm">
<input id="inptext" type="text" placeholder="Your name..."></input>
<input id="inpadress" style="margin-left: 10px;" type="text" placeholder="Your email..."></input>
</form>
<button onclick="myFunction()"style="margin-left: 10px;" id="box">Add</button>
</div>
<br>
<div style="display: inline-flex">
<table id="tablename" style="width:80%; margin-top:15px;">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</table>
<div id="buttons" style="float:right;width: 300px; margin-top:50px;">
</div>
</div>
<script>
var z = 1;
function myFunction() {
var x = document.getElementById("inptext").value;
var y = document.getElementById("inpadress").value;
var form = document.getElementById("myForm");
form.reset();
document.getElementById("tablename").innerHTML = document.getElementById("tablename").innerHTML + '<tr><td id=acvda'+ z + '>' + x + '</td><td id=zcvda' + z + '>' + y + '</td></tr>';
var h = '<button style="margin-left:8px" class="edit" id=vda' + z + '>Edit</button>';
var f = '<div id=zzza'+z+' style=height:10px></div>';
var abc = '<button style="margin-left:-36px" class="update" id="cvda'+z+'">Update</button>';
var total = h + abc + f;
document.getElementById("buttons").innerHTML = document.getElementById("buttons").innerHTML + total;
document.getElementById('vda' + z).addEventListener('click', doSomething);
document.getElementById('cvda' + z).addEventListener('click', doSomething2);
document.getElementById('cvda' + z).style.visibility='hidden';
z = z + 1;
}
function doSomething() {
document.getElementById("inptext").value = document.getElementById("ac"+this.id).innerHTML;
document.getElementById("inpadress").value = document.getElementById("zc"+this.id).innerHTML;
document.getElementById(this.id).style.visibility='hidden';
document.getElementById('c'+this.id).style.visibility='visible';
}
function doSomething2() {
document.getElementById("a"+this.id).innerHTML = document.getElementById("inptext").value;
document.getElementById("z"+this.id).innerHTML = document.getElementById("inpadress").value;
document.getElementById(this.id).style.visibility='hidden';
form.reset();
var edit = this.id;
var edit2 = edit.replace("c", "");
document.getElementById(edit2).style.visibility='visible';
}
</script>
</body>
</html>
The following line remove all your listeners:
document.getElementById("buttons").innerHTML =
document.getElementById("buttons").innerHTML + total;
document.getElementById('vda' + z).addEventListener('click',
doSomething);
use this instead:
var div = document.createElement('div');
div.innerHTML = total;
document.getElementById("buttons").appendChild(div);
Say I have a textfield where the dimensions of the table are given. like 2 3
now I need to write a function that creates a table out of div-tags with those dimensions. The table has to be inserted in the <div id="output"> -element
I was thinking of making a string with osme for-loops that looks like this
<div>
<div> </div>
<div> </div>
</div>
<div>
... (more columns)
</div>
So that looks like a sequence of div-tags and afterwards I would convert this to html and insert it.
But isn't there a more efficient way?
In your Javascript,
<script type="text/javascript">
var rows,cols,str="";
function generateTable()
{
rows = documnt.getElementById('rows').value;
cols = documnt.getElementById('cols').value;
str ="<table>"
for(var i=0;i<rows;i++)
{
str = str+"<tr>";
for(vat j=0;j<cols;j++)
{
str = str+"<td></td>";
}
str =str+"</tr>";
}
str = str + "</table>;
documnt.getElementById('output').innerHTML = str;
}
</script>
In your HTML,
<input type="number" id="rows" placeholder="Number of rows" />
<input type="number" id="cols" placeholder="Number of cols" />
<input type="button" id="submit" value="Submit" onClick="generateTable();" />
<br>
<br>
<div id="output"></div>
Something like this maybe:
var rows = 3; //these would be populated by your text field entries
var columns = 2;
function makeTable() {
html = '<table>';
for(var i=0; i<rows; i++) {
html += '<tr>';
for(var j=0; j<columns; j++) {
html += '<td><p>Some Data</p></td>';
}
html += '</tr>';
}
html += '</table>';
document.getElementById("output").innerHTML = html;
}
table, td {
border: 1px solid black; padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Maker</title>
</head>
<body>
<div id="output" onClick="makeTable()"><h1>Click me to make a table!</h1></div>
</body>
</html>
I know this has come up a lot of times and I have searched all over stack overflow. I have created a working Javascript function to get the <input> tag values within each row of a table.
However, when I include a <tbody> tag (which is required for row sorting), the Javascript code will not work and I have no idea why?
Please see the code below:
function writeXML() {
var table = document.getElementById('table_assoc');
alert(table);
var rCount = document.getElementById('tbody_id').rows.length;
alert(rCount);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var FILENAME = "c:/XML.xml";
var file = fso.CreateTextFile(FILENAME, true);
file.WriteLine('<?xml version="1.0" encoding="utf-8"?>\n');
file.WriteLine('<Seating_Plan>\n');
for (var i = 1; i < rCount; i++) {
var id = table.rows[i].cells[0].children[0].value; <-- Cant Find Table reference when <tbody> tag included.
var deptcode = table.rows[i].cells[1].children[0].value;
var name = table.rows[i].cells[2].children[0].value;
var role = table.rows[i].cells[3].children[0].value;
var desc = table.rows[i].cells[4].children[0].value;
var image = table.rows[i].cells[5].children[0].value;
var asdir = table.rows[i].cells[6].children[0].value;
file.WriteLine('<Person id="' + id + '"><Dept>' + deptcode + '</Dept><Name>' + name + '</Name><Description>' + desc + '</Description><Role>' + role + '</Role><Image><image href="' + image + '"/></Image><AssociateDir><AssociateDir href="' + asdir + '"/></AssociateDir></Person>');
}
file.WriteLine('</Seating_Plan>');
file.Close();
}
How do I get this to work when including a tbody tag?
==================================================================
UPDATE:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="Admin_Javascript.js"></script>
</head>
<body>
<div id="Header_Logo" ></div>
<div id="Header_Logo2">BMW UK</div>
<div id="Admin_Header">BMW LAYOUT EDITOR</div>
<div id="Admin_Nav">
<a id="btn_xml" class="Admin_Nav_Buttons">XML</a>
<a class="Admin_Nav_Buttons">Layout</a>
</div>
<div id="Admin_XML">
<div id="XML_Buttons2">LOAD</div>
<div id="XML_Buttons" onClick="writeXML()">SAVE</div>
<span> </span>
<p class="Admin_headers">Departments</p>
<div id="Admin_Dept_Container"></div>
<p class="Admin_headers">Associates</p>
<div id="Admin_Associate_Container">
<table id="table_assoc">
<tbody id="tbody_id" >
<tr><td><input value="ID"></td></tr>
<tr><td><input value="deptcode"></td></tr>
<tr><td><input value="name"></td></tr>
<tr><td><input value="role"></td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
There is also a collection of tBodies, you can get the one by its index:
var id = table.tBodies[0].rows[i].cells[0].children[0].value;
I'm new in programming and I'm trying to call a function without any button or click event. I'm doing a table within a table using javascript function. Here's my code so far:
<html>
<head> <title> Hello </title> </head>
<body>
<table border=1>
<tr>
<td> Hello! <input type='hidden' value='0' id='theValue' /> <script> add(); </script> <div id='myDiv'> </div> </td>
</tr>
<script>
$ctra = 1;
$ctr1a = 1;
function add() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = "<table border=1>"+
"<tr>"+
"<td> Hello! <input type='hidden' value='0' id='theValue' /> <script> add(); </script> <div id=('" + divIdName + "')> </div> </td>"+
"</tr>"+
"</table>";
if($ctra<100){
ni.appendChild(newdiv);
$ctra++;
}
}
</script>
</table>
</body>
</html>
When I run it, it displays
"+ ""+ "
Hello!
"; if($ctra<100){ ni.appendChild(newdiv); $ctra++; } }
in the browser. What could the problem be? Thank you in advance!
EDIT
function add() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = "<table border=1><tr><td> Hello! <input type='hidden' value=0 id='theValue' /><div id='" + divIdName + "'></td></tr></table>";
ni.appendChild(newdiv);
for(var i=1;i<100;i++) {
var ni = document.getElementById(divIdName);
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = "<table border=1><tr><td> Hello! <input type='hidden' value='" + i + "' id='theValue' /><div id='" + divIdName + "'></td></tr></table>";
ni.appendChild(newdiv);
}
}
Try this
<html>
<head> <title> Hello </title> </head>
<script type="text/javascript">
$ctra = 1;
$ctr1a = 1;
function add() {
alert('s')
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = "<table border=1><tr><td> Hello! <input type='hidden' value='0' id='theValue' /></tr></table>";
if($ctra<100){
ni.appendChild(newdiv);
$ctra++;
}
}
</script>
<body onload="add()">
<table border="1">
<tr>
<td> Hello! <input type='hidden' value='0' id='theValue' />
<div id='myDiv'> </div> </td>
</tr>
</table>
</body>
</html>
Hope it works for you..:)
Your JS results in nested blocks, this isn't allowed in html. The function add() in your blocks is not defined, because when the browser encounters it, it hasn't seen your definition of add() yet. Your table contains a script that contains another table which contains yet another script. It's very confusing :P
OK, if i understand correctly: you have a single table. You'd like to have JS put another table inside. The thing you want to put inside is, in this example, a copy of the table. You want to end up with a table inside a table and you want to achieve it programatically.
First separate your concerns: scripts and html:
If you put your add() after the definition and you put your script after the body then the browser will encounter it and run it. HTH:
<html>
<head> <title> Hello </title> </head>
<body>
<table id="t1" border=1>
<tr>
<td> Hello! <input type='hidden' value='0' id='theValue' />
<div id='myDiv'></div>
</td>
</tr>
</table>
<script>
function add_table() {
var table1 = document.getElementById("t1"),
table2 = table1.cloneNode(true),
mydiv = document.getElementById("myDiv"),
mydiv2;
table2.setAttribute('id', 't2');
mydiv2 = table2.getElementsByTagName("div")[0];
mydiv2.setAttribute('id', 'myDiv2');
mydiv.appendChild(table2);
}
// call the function
add_table();
</script>
</body>
</html>
You have </script> inside the code. Browser interprets that as an end of javascript and breaks back to HTML. To fix this, you can divide this string into for example </sc'+'ript>. That will fix this issue, but probably you'll still have to work a bit on the script, but that's a different story.
You have to switch between differents quotes, and remove braces for the id, like this :
newdiv.innerHTML = "<table border=1>"
+"<tr>"
+'<td> Hello! <input type="hidden" value="0" id="theValue" /> '
+'<script> add(); </script> <div id="' + divIdName + '"> </div> </td>'
+"</tr>"
+"</table>";
Because you cant access the function without any evnt in the dom..You have to call the function on any event of the elemnt.
move the script outside the table-element to the head or to the end of the body.
first add the div, then call the script. you might want to call your add() in <body onload='add'>
remove the braces here to create valid html: <div id=('" + divIdName + "')>