What is preventing me from adding any style to this specific element?

Currently, I am in the process of creating a stopwatch for solving Rubik's cube. Within this project, there is a div element named "records" that is meant to display the time after a button is clicked. However, I am facing an issue where I am unable to append a p element to this div, and I cannot implement any CSS styling to it either.

Here is a snippet from rubik.js:

document.getElementById("records").appendChild(document.createElement("p").appendChild(document.createTextNode(`${formula.first}.${formula.second}.${formula.third}`)));

Whenever I attempt to append a child paragraph to this div, it ends up becoming a text element instead. Here is the CSS styling applied to the div:

#records {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - 620px);
    height: 130px;
    border-top: 2px solid black;
    background-color: white !important;
    overflow-y: scroll;
}

It is worth noting that the two buttons ("add current time" and "remove last time") have a position of fixed.

Thank you for taking the time to read this.

javascripthtmlcssdom

Answer №1

The Node.appendChild() method will return the node that was appended, whether it is a node or a text node. In this case, when using 

document.createElement("p").appendChild(document.createTextNode(
${formula.first}.${formula.second}.${formula.third})), it will return the appended text node, not the p element itself.

To ensure the correct order, first create the p element, then assign it to a variable. Next, append the text node to this p element before finally appending the entire p element to #records:

const formula = { first: '1', second: '2', third: '3' };

const p = document.createElement("p")

p.appendChild(document.createTextNode(`${formula.first}.${formula.second}.${formula.third}`))

document.getElementById("records").appendChild(p);
<div id="records"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Developing a HTML button through Javascript that triggers a method with a single parameter when clicked

My current project involves creating HTML buttons through JavaScript using AJAX. Each time I click one of these buttons, it triggers an AJAX function. If the AJAX request is successful, it retrieves a number that will be utilized in a for loop. As the loop ...

javascriptjqueryhtmlajax

Optimizing Three.js for better performance

Recently, I delved into working with three.js and webgl for a personal project. My goal was to develop a wardrobe model based on user input. You can check out the project at this link: Initially, the rendering speed was fast and smooth without Materials a ...

javascripthtmlthree.jsrenderingwebgl

What is the reason for recursion not producing a new object as output?

Trying to filter out nodes in a recursion function that iterates through a tree based on the registry property. function reduceNodesRegistry(source: any) { if (!source.registry) return source; return { ...source, children: s ...

javascripttypescript

Retrieve data from multiple JSON tables using a JavaScript loop

Check out this Codepen for a working example. I am relatively new to Javascript, so I may not be approaching this problem the best way. If you have any suggestions on how I could improve my approach, I would greatly appreciate it; always looking to learn ...

javascriptjqueryarraysjsonajax

Position a component in relation to another component using AngularJS

Utilizing ng-show and ng-hide, I created a descriptive box that appears below text when clicked. However, there is an issue as the description box does not align directly under the text, similar to what is shown in this image https://i.stack.imgur.com/phBh ...

javascripthtmlcssangularjs

What steps can be taken to troubleshoot issues with the jquery mask plugin?

I am using the jQuery Mask Plugin available at to apply masks to input fields on my website. Currently, I am trying to implement a mask that starts with +38 (0XX) XXX-XX-XX. However, I am facing an issue where instead of mandating a zero in some places, ...

javascriptjqueryjquery-plugins

Eliminating the Scrollbar from Bootstrap 4 DataTable Causes Table Width to Decrease

My tables are causing a horizontal scroll bar to appear when converted to Bootstrap data tables. Adding the "p-3" class to the table's div for padding eliminates the scroll bar but also narrows the table. Is there a solution to removing the scroll b ...

htmlcssbootstrap-4datatablesspacing

Why Does Angular's ngIf Always Result in a Negation to True?

Can someone please clarify this for me? I'm having trouble understanding why the *ngIf condition and else statement always evaluate to true unless I am completely mistaken. Here is the situation: I have an icon that should turn the background color t ...

javascriptangular

The Else clause is executing twice in the jQuery code

https://jsfiddle.net/mpcbLgtt/2/ Creating a function that adds card names to an array named deck and their IDs to another array called cardIds when a div with the class "card" is clicked. The cards available are: <div class='card' id=' ...

javascriptjqueryarraysappend

Unforeseen behavior of $.Ajax within a loop

While executing my code <div id="#1gr1">Kun</div> for(var i=1;i<=10;i++){ $.ajax({ type: "POST", url: "get_url.php", async: false, data: {a: 'hi'} }).d ...

jqueryajaxdom

Combining labels over multiple lines using lower division

I have a setup where I am using two DIVs, one positioned below the other. The top DIV contains a Multiline Label that dynamically generates data. However, when the data in the label exceeds a certain length, it does not create space and instead overlaps w ...

c#asp.nethtmlcsslabel

What is the process for integrating this graph using highcharts?

Check out this link for more information on investment decision-making. There is a visually appealing graph and pie chart featured in the section about Investment Decision-Making in 2016. After noticing that it was created using Highcharts, I wanted to c ...

javascripthtmlcsshighchartsfrontend

I'm looking for a CSS layout that can change the order of columns in a row stack for desktop view. Can anyone help me with this? (refer to

I am struggling with arranging elements in HTML and CSS. As a beginner, I am faced with the challenge of ordering desktop and mobile layouts differently. The current code I am using looks like this: <div class="row "> <div class=&quo ...

htmlcsslayoutbootstrap-4

What is the trick to incorporating nested tabs within tabs?

My tabs are functional and working smoothly. To view the jsfiddle, click here - http://jsfiddle.net/K3WVG/ I am looking for a way to add nested tabs within the existing tabs. I would prefer a CSS/HTML solution, but a JavaScript/jQuery method is also acce ...

javascriptjqueryhtmltabs

Loading bar for AngularJS material framework

Is there a way to integrate https://material.angularjs.org/latest/demo/progressLinear into my website so that it shows progress when a new view is loading? I'm trying to figure out how to obtain the value of the current page being loaded. Any suggest ...

javascriptangularjs

Styling CSS: Adjusting font sizes for placeholders and text boxes

I am struggling with styling an input field to have a font size of 45px while the placeholder text inside it should be 18px and vertically aligned in the middle. Unfortunately, my current code is not working in Chrome and Opera. Can anyone offer a solutio ...

htmlcssvertical-alignmentplaceholder

Converting Epoch timestamp to AM/PM format in a React render function

I am currently working on a personal project using React.js. I have successfully fetched an API, and one of the values returned is an Epoch timestamp. My goal is to display this timestamp in a human-readable format such as am/pm. The Epoch timestamp is dis ...

javascriptreactjstimestampepoch

Can you tell me the XPath of this specific element?

Looking for the XPath of this specific element: <a> href="/resident/register/">Register another device </a> I initially tried $x("//*[contains(@href, 'resident/register')]") Unfortunately, no results were returned. Any other su ...

pythonhtmlxmlseleniumxpath

Eliminate any unnecessary space below a list item and ensure it is justified

I need help with some extra indentation that is appearing under an ordered list I have created. I want to eliminate the extra spacing to achieve a cleaner look. This is how I want it to appear: https://i.sstatic.net/O7cyG.png However, it currently looks ...

htmlcssbootstrap-4

Is a shifting background image possible?

Can anyone shed some light on how the dynamic background image on this website is created? Is it a JavaScript plugin, a simple .gif, or something else entirely? Appreciate any insights! ...

javascriptjquery