can't use appendChild on elements, only on body - javascript

I'm trying to create a function that will add rows and cells to a table with data from inputs, but for some reason after I create a new row and try to use appendChild (or just append) to put it in the table, the console shows an error:
"Uncaught TypeError: Cannot read properties of undefined (reading
'append')"
Thanks for helping!
<html>
<body>
<table id="tbl" border="1">
<table>
<script>
function showStudent () {
let tbl = document.getElementById('tbl')
let tr = document.createElement('tr')
document.tbl.append(tr)
}
</script>
</body>
</html>

Try
tbl.append(tr)
Instead of
document.tbl.append(tr)

Related

Can't append table to div

I created a table using d3.js library,
but when I try to append the table to a div, it gives an error?
code:
<head>
<script src="../../d3.min.js"></script>
</head>
<body>
<div id="main">
Hi
</div>
<script>
const table = d3.create("table");
const tbody = table.append("tbody");
var i,j,row;
for(i=0;i<5;i++){
row =tbody.append("tr");
for(j=0;j<3;j++){
row.append("td").text(`${i},${j}`);
}
}
console.log(typeof(table));
console.log(table);
node =table.node();
console.log(typeof(node));
console.log(node);
d3.select("#main").append(node);
</script>
</body>
</html>
but I get an error:
although my code similar to what is in this tutorial
A tutorial on d3js
Observable tutorials are meant to create Observable notebooks. There are several small differences between Observable and a regular D3 running in a browser.
That being said, the only problem in your approach is that append requires either a string with the tag name or the element. If you have a string, just use it as append("foo"). However, if you have the element to be appended (in your case, table.node()), you have to return it from a function.
So, instead of:
d3.select("#main").append(node);
It has to be:
d3.select("#main").append(() => node);
Here is your code with that change only:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="main">
Hi
</div>
<script>
const table = d3.create("table");
const tbody = table.append("tbody");
var i, j, row;
for (i = 0; i < 5; i++) {
row = tbody.append("tr");
for (j = 0; j < 3; j++) {
row.append("td").text(`${i},${j}`);
}
}
node = table.node();
d3.select("#main").append(() => node);
</script>
Finally, if you are writing regular scripts for a browser, just ditch this d3.create() followed by append(() => selection.node()). Use a simple tag string instead.

How to resolve jquery children method alert error?

what's the problem here? When I run this code I get undefined error
<div>
<span>ali</span>
<span>veli</span>
<span>deli</span>
</div>
<script>
var x = $("div").children();
alert(x[0].text);
</script>
You get undefined because there is no HTML DOM property named text. Maybe you wanted to use innerText property, e.g.:
var x = $("div").children();
alert(x[0].innerText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span>ali</span>
<span>veli</span>
<span>deli</span>
</div>

How to change the innerHTML of the current element?

I am trying to print a text on the current element. I tried these two codes, but they doesn't seem to work:
This one is printing the text in the whole document:
<div>
<script>
fetch('file.txt').then((resp) => resp.text()).then(function(data) {
document.write(data);
});
</script>
</div>
Resulting in this:
<html>
<body>
<!-- THE TEXT THAT I REQUESTED APPEARS HERE -->
</body>
</html>
And the code below is returning the following error:
<div>
<script>
fetch('file.txt').then((resp) => resp.text()).then(function(data) {
document.this.innerHTML(data);
});
</script>
</div>
Cannot read property 'innerHTML' of undefined
Replace this with body. innerHTML is not a function its a property you need to set it.
I think you want to append to the <div> in which the <script> us present. You can access the script and get its parentNode
<div>
<script>
const script = document.scripts[document.scripts.length - 1];
fetch('file.txt').then((resp) => resp.text()).then(function(data) {
script.parentNode.innerHTML = data;
});
</script>
</div>
Note:document.scripts[document.scripts.length - 1] will get the current <script> tag because it will be lastest script executed.
You can use document.writeln() to write within the current div
<div>
<script>
fetch('file.txt').then((resp) => resp.text()).then(function(data) {
document.writeln(data);
});
</script>
</div>
Hre is a similar example demonstrating the result.
<div>
<script>
Promise.resolve('abc123<br>xyz789')
.then(function(data) {
document.writeln(data)
});
</script>
</div>
First you should move the script out of the div and then replace 'this' in your code with a reference to the target div.
If you give your div an id of 'target' you could do the following:
const target = document.getElementById('target');
fetch('file.txt').then((resp) => resp.text()).then((data) => target.innerHTML = data);

Error coming as "Cannot set property 'innerHTML' of null"

I am generating html table from Javascript and assign as InnerHTML to a div tag, but its giving an error:
"Uncaught TypeError: Cannot set property 'innerHTML' of null"
<html>
<body>
<div class="fieldlist-vertical-title" style="color:white;left:0px;display:none;" id="rosterlegend">Some text</div>
<script>
function generateLegend()
{
var fullTable ='' fullTable='<Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD>
<TD>01:00 to 21:30</TD></TR></Table></TR></Table>'
document.getElementById('rosterlegend').innerHTML = fullTable
}
generateLegend();
</script>
</body>
</html>
Error : Uncaught TypeError: Cannot set property 'innerHTML' of null
Try changing to something like this, so we ensure the HTML DOM has completed loading first.
Use ES6 template string instead of plain strings!
document.addEventListener('DOMContentLoaded', () => {
generateLegend();
});
function generateLegend() {
fullTable = `<Table>
<TR>
<Table>
<TR bgcolor=#FF5733>
<TD>MM</TD>
<TD>01:00 to 21:30</TD>
</TR>
<TR bgcolor=#FFFFFF>
<TD>EVVV</TD>
<TD>09:00 to 05:30</TD>
</TR>
</Table>
</TR>
</Table>`;
document.getElementById('rosterlegend').innerHTML = fullTable;
}
<div id="rosterlegend">
<div>
Removes new lines and extra spaces in the HTML String.
Rest of your code works fine!
However it is not a god practice.
Ideally you have to wait for the window to be loaded.
window.onload(){
generateLegend();
}
function generateLegend() {
var fullTable = " <Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD><TD>01:00 to 21:30</TD></TR><TR bgcolor=#FFFFFF><TD>EVVV</TD><TD>09:00 to 05:30</TD></TR></Table></TR></Table>";
document.getElementById('rosterlegend').innerHTML = fullTable;
}
generateLegend();
<div id="rosterlegend">Some text</div>
Your issue is that you are trying to access your div with the id of "rosterlegend" before the DOM has loaded. This means that when your javascript tries to access your element it cannot. One way you can fix this is by adding the load or DOMContentLoaded event listener to your element, where the function will fire once your HTML (including images if you use the load event) and window has loaded. This way your javascript will know about your HTML.
See working example below:
function generateLegend() {
var fullTable = " <Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD><TD>01:00 to 21:30</TD></TR><TR bgcolor=#FFFFFF><TD>EVVV</TD><TD>09:00 to 05:30</TD></TR></Table></TR></Table>";
document.getElementById('rosterlegend').innerHTML = fullTable;
}
window.addEventListener("load", generateLegend); // call your function when the window has loaded
<div id="rosterlegend"></div>

Unable to add appendchild function to property in the Object

<!DOCTYPE html>
<html>
<body>
<script text="type/javascript">
var countdown=function()
{
// create a couple of elements in an otherwise empty HTML page
this .heading=document.createElement("h1");
this .heading_text=document.createTextNode("Big Head!");
this .heading.appendChild(heading_text);
this .document.body.appendChild(heading);
}
var obj1 = new countdown();
</script>
</body>
</html>
In the above code I am unable to add appendChild(heading_text) to the heading_text property and facing error
"Uncaught ReferenceError: heading_text is not defined".
How to proceed with this program.?
because this.heading_text exists and heading_text doesn't
make it
var countdown=function()
{
// create a couple of elements in an otherwise empty HTML page
var heading=document.createElement("h1");
var heading_text=document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
you are declaring variables in wrong way..
declaring a variable in js is like this
var variable;
so, in your script change these lines:
this .heading=document.createElement("h1");
this .heading_text=document.createTextNode("Big Head!");
this .heading.appendChild(heading_text);
this .document.body.appendChild(heading);
into this:
var heading=document.createElement("h1");
var heading_text=document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);

Categories

Resources