P5.dom.js 'createElement' function not able to set properties?

p5.js Coding Questions
1

Hi, I’m building a forum site from scratch and I’m using the p5.dom.js library to speed up the process.
I’m attempting to create a TR tag and three TD tags that go inside the TR, after that I want the TR to go inside of my TBODY of choice (the one with the id of ‘forums’); However this is not the case, the row and columns are created just fine, but I’m not able to set their parentElement or any attribute for that matter. What am I doing wrong?

var allPosts;
function setup() {
    noCanvas();
    allPosts = loadStrings("./allPosts.txt", ready);
}
function ready() {
    console.log(allPosts);
    var post = document.getElementById("forums");
    var curPost = createElement("tr", "");
    var username = createElement("td", "Test Username");
    var subject = createElement("td", "Test Subject");
    var content = createElement("td", "This is text content.");
    curPost.elt.parentElement = post;
    username.elt.parentElement = curPost;
    subject.elt.parentElement = curPost;
    content.elt.parentElement = curPost;
}
1 Like
2

Maybe use p5::select() instead of getElementById(): :thinking:

const post = select('forums');
const post = select('#forums');

Doing so, you can now invoke method p5.Element::child(), passing post as its argument: :sunglasses:

Some sketch using both p5.Element::child() & p5.Element::parent() methods: :innocent:

1 Like
3

Thank you for the help. I really think you’re on to something, but currently your solution gives me this error

site.html:23 Uncaught (in promise) TypeError: Cannot read property 'child' of null
at ready (site.html:23)
at p5.js:56385
at p5.js:57041

I know for certain the “forums” is an id of a TBODY element.
So what’s going on?

Here’s the full page code:

<!DOCTYPE HTML>
<HTML lang="en">
<head>
	<title>Cameron Schoenecker: Forum Site</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="../styles.css">
	<script src="p5.js"></script>
	<script src="p5.dom.js"></script>
	<script>
		var allPosts;
		function setup() {
			noCanvas();
			allPosts = loadStrings("./allPosts.txt", ready);
		}
		function ready() {
			console.log(allPosts);
			const post = select("forums");
			var curPost = createElement("tr", "");
			var username = createElement("td", "Test Username");
			var subject = createElement("td", "Test Subject");
			var content = createElement("td", "This is text content.");

			post.child(curPost);
			//username.elt.parentElement = curPost;
			//subject.elt.parentElement = curPost;
			//content.elt.parentElement = curPost;
		}
	</script>
</head>
<body>
	<div class="main">
		<div class="post"><a href="post.html"><h2 class="post">Post Thread</h2></a></div>
		<h2 style="margin-left: 5%"><span style="text-decoration: underline">Main Page:</span> <span style="font-style: italic; font-size: 15px">you can put any topic here</span></h2>
		<table class="forum">
			<tbody id="forums">
				<tr>
					<th><span style="font-style: italic">User Name</span></th>
					<th><span style="font-style: italic">Subject</span></th>
					<th><span style="font-style: italic">Content</span></th>
				</tr>
				<tr class="forum">
					<td>Anonymous</td>
					<td>test</td>
					<td>example text...</td>
				</tr>
			</tbody>
		</table>
		<hr></hr>
	</div>
	<div class="header">
  <p style="position: absolute; margin-left: 10px"><a href="../home.html">Back Home</a></p>
		<h1 style="text-align: center; margin-bottom: 0px">Forum Page</h1>
		<h1 style="text-align: center; margin-top: 0px">Post Anything Here</h1>
	</div>
	<div class="r">
		<img style="width: 100%" src="../cmd.gif" alt="Command Prompt" />
	</div>
	<div class="l">
		<img style="width: 100%" src="../cmd.gif" alt="Command Prompt" />
	</div>
</body>
</HTML>
4

I’ve made a mistake at const post = select('forums');! :woozy_face:
Forgot to prefix it w/ #, so it searches for the id attribute: const post = select('#forums'); :man_facepalming:

https://p5js.org/reference/#/p5/select

2 Likes
5

Thank you a million times over @GoToLoop! This works perfectly!