How do I create a new element with a class with JS

MagicCrayon9342

I want this + button to create a card

i need to be able to create infinite elements all with the class “card” and have the text editable like this.

SuperSonicmario

el = document.createElement("a")
el.className = "card"
[some parent element].appendChild(el)

Last edited by SuperSonicmario (Jan. 15, 2022 19:17:33)

MagicCrayon9342

SuperSonicmario wrote:

(#2)

el = document.createElement("a")
el.className = "card"
[some element before that].appendChild(el)

I tried that and it no work it does nothing

MagicCrayon9342

el is not defined.

MagicCrayon9342

After I get the creation of cards I need them editable and it all to be saved to local storage.

CST1229

MagicCrayon9342 wrote:
(#4)
el is not defined.

You need a let or var to define the variable.
Also a more compact way:

[some parent].appendChild(Object.assign(document.createElement("a"), {className: "card"}))

If needed, you can also assign other stuff in the object, like textContent.

This is a signature. It's a piece of text that appears below every post I write. Click here to learn more, including how to make your own.
RIP assets image hosting. 2013?-2023

MagicCrayon9342

still does nothing

document.appendChild(Object.assign(document.createElement("a"), {className: "card"}))

also using a one liner makes the code less readable and make people unable to understand it.

Uncaught DOMException: Node.appendChild: Cannot have more than one Element child of a Document

Last edited by MagicCrayon9342 (Jan. 15, 2022 20:59:22)

god286

var myCard = document.createElement("div")
myCard.classList.add("my-class")
document.getElementById("my-cards").append(myCard)

Here are some of my followers!

I joined: 5 years, 9 months, 24 days ago (31/03/2018)
I have: 479 followers
In total, I have attained: 1,403 loves, 1,145 favourites, and 33,731 views.
Fun Fact: If my account continued to gain followers at a similar rate to right now, in 14,210 years I would reach the number of followers griffpatch has today! Try to imagine how many followers he would have then!
Thank you everyone!
Script created by god286.

MagicCrayon9342

god286 wrote:

var myCard = document.createElement("div")
myCard.classList.add("my-class")
document.getElementById("my-cards").append(myCard)

I need code that'll actually work, here's the code I have so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="./script.js"></script>
</head>
<body>
    <h1> Hello, World! </h1>
    <p>Easy HTML Cards </p> 
    <div class="card" contenteditable>
        <article>
            <h1> Hello </h1>
            <p> World </p>
        </article>
    </div>
    <div class="card">
        <article contenteditable>
            <h1> Hello </h1>
            <p> World </p>
        </article>
    </div>
    <div class="card">
        <article contenteditable>
            <h1> Hello </h1>
            <p> World </p>
        </article>
    </div>
    <button onClick="newCard()">+</button>
</body>
</html>

html {
    scroll-behavior: smooth;
    font-family: system-ui;
}
body { background-color: white;   background: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
.card { background-color: white; color: black; border-radius: 2pt; opacity: 85%; padding:2rem; margin: 0.5rem; display: inline-grid; }
.card:hover { background-color: black; color: white; }

function newCard() {
    appendChild(Object.assign(document.createElement("a"), {className: "card"}))
}

TheSmartGuy1234

sign up to stack overflow and ask there

It's AF day in my timzone.

ST: celebrate AF day in your timezones
Me: I live in new zealand
ST: oh no nononono

you use

sudo sh -c 'echo "text" > file'

No, professionals use

echo 'text' | sudo tee file 1> /dev/null

Scroll* for more!

what are @SIMIA1358 and @TPRATTAY doing!??!?!
(2023/11/04 YEAR-MM-DD)
https://scratch.mit.edu/discuss/topic/652044/?page=222#post-7453472
griffpatch appel is broken

Za_Chary wrote:

Games snippet:
10. yFzZ3MgsySzJLMv8yBzIfMqcynzJ04zLbMi8yNzJvNjM2KzYPNgsybzJLMi8yOzYzMk8yHzY3MmMyhzKrNlcytzYnMpcy6Ncy3zJLNoMyCzI7NisyQzL7Mhc2QzYrMkcyUzI7MisyBzKjNicyfzLHMrMymzJnMocygzYk

MagicCrayon9342

TheSmartGuy1234 wrote:
sign up to stack overflow and ask there

i've checked all of SO but got nothing that worked.

NFlex23

const a = document.createElement('a');
a.className = 'card';
document.body.appendChild(a);

Help improve the Advanced Topics (Really!)
Before you create a topic:
Always search for duplicates or other similar topics before making an umbrella topic, e.g., “The Mac Topic”.

Is it about something you are planning on making but haven't made yet? If so, please wait to post until you have created a working prototype. This is a key factor to keeping the ATs as clean as possible.
The ATs aren't technical support. It is perfectly valid to ask questions about things related to programming, but not issues with external websites, apps, or devices. Most sites have their own support system; try asking there!
Is it related to something you are making in Scratch? (This includes OSes and other Scratch projects) If so, please post in Collaboration, Show and Tell, or another similar forum.
Is your topic questionably “advanced”? Try browsing the other forums to see if your topic fits better in one of those.
Issues with Scratch itself should be put in Bugs and Glitches.

Before you post: Is what you're posting likely to start an argument or derail the thread (e.g., browsers, operating systems)? If so, please re-think your post!

MagicCrayon9342

NFlex23 wrote:

const a = document.createElement('a');
a.className = 'card';
document.body.appendChild(a);

it works!!!

god286

MagicCrayon9342 wrote:

NFlex23 wrote:

const a = document.createElement('a');
a.className = 'card';
document.body.appendChild(a);

it works!!!

wait why are they links?

Here are some of my followers!

I joined: 5 years, 9 months, 24 days ago (31/03/2018)
I have: 479 followers
In total, I have attained: 1,403 loves, 1,145 favourites, and 33,731 views.
Fun Fact: If my account continued to gain followers at a similar rate to right now, in 14,210 years I would reach the number of followers griffpatch has today! Try to imagine how many followers he would have then!
Thank you everyone!
Script created by god286.

MagicCrayon9342

NFlex23 wrote:

const a = document.createElement('a');
a.className = 'card';
document.body.appendChild(a);

how do i apply the contenteditable attribute

god286

MagicCrayon9342 wrote:
how do i apply the contenteditable attribute

el.contentEditable = "true"

Last edited by god286 (Jan. 15, 2022 23:57:19)

Here are some of my followers!

I joined: 5 years, 9 months, 24 days ago (31/03/2018)
I have: 479 followers
In total, I have attained: 1,403 loves, 1,145 favourites, and 33,731 views.
Fun Fact: If my account continued to gain followers at a similar rate to right now, in 14,210 years I would reach the number of followers griffpatch has today! Try to imagine how many followers he would have then!
Thank you everyone!
Script created by god286.

MagicCrayon9342

god286 wrote:
MagicCrayon9342 wrote:
how do i apply the contenteditable attribute
el.contentEditable = true

ok, it worked. now how to i save this DOM to local storage.

god286

MagicCrayon9342 wrote:
god286 wrote:
MagicCrayon9342 wrote:
how do i apply the contenteditable attribute
el.contentEditable = true
ok, it worked. now how to i save this DOM to local storage.

Wow this topic is going insanely fast from “How do I create a new element with a class with JS” to “How do I save this DOM to local storage”

Store the state of the cards in localstorage and edit it when a card is updated

Here are some of my followers!

I joined: 5 years, 9 months, 24 days ago (31/03/2018)
I have: 479 followers
In total, I have attained: 1,403 loves, 1,145 favourites, and 33,731 views.
Fun Fact: If my account continued to gain followers at a similar rate to right now, in 14,210 years I would reach the number of followers griffpatch has today! Try to imagine how many followers he would have then!
Thank you everyone!
Script created by god286.

MagicCrayon9342

god286 wrote:
MagicCrayon9342 wrote:
god286 wrote:
MagicCrayon9342 wrote:
how do i apply the contenteditable attribute
el.contentEditable = true
ok, it worked. now how to i save this DOM to local storage.
Wow this topic is going insanely fast from “How do I create a new element with a class with JS” to “How do I save this DOM to local storage”

Store the state of the cards in localstorage and edit it when a card is updated

umm well I have no idea on how localstorage works and nothing on stack overflow works

this is my second to last question after this I'll need “X” buttons on the cards for deletion.

Last edited by MagicCrayon9342 (Jan. 16, 2022 00:02:35)

NFlex23

god286 wrote:
(#14)
MagicCrayon9342 wrote:
NFlex23 wrote:
const a = document.createElement('a');
a.className = 'card';
document.body.appendChild(a);
it works!!!
wait why are they links?

The code @MagicCrayon9342 shared used links, so I used them too. You can really use any type of element; this is just an example.

Help improve the Advanced Topics (Really!)
Before you create a topic:
Always search for duplicates or other similar topics before making an umbrella topic, e.g., “The Mac Topic”.

Is it about something you are planning on making but haven't made yet? If so, please wait to post until you have created a working prototype. This is a key factor to keeping the ATs as clean as possible.
The ATs aren't technical support. It is perfectly valid to ask questions about things related to programming, but not issues with external websites, apps, or devices. Most sites have their own support system; try asking there!
Is it related to something you are making in Scratch? (This includes OSes and other Scratch projects) If so, please post in Collaboration, Show and Tell, or another similar forum.
Is your topic questionably “advanced”? Try browsing the other forums to see if your topic fits better in one of those.
Issues with Scratch itself should be put in Bugs and Glitches.

Before you post: Is what you're posting likely to start an argument or derail the thread (e.g., browsers, operating systems)? If so, please re-think your post!

Discuss Scratch