How do you add/remove HTML ids/classes to elements using JavaScript? [duplicate]

Question

I somewhat understand how to add elements with text to an HTML document using JavaScript. I'm just looking for a way to add an id/class to an element that is created from a function that's triggered by a event attribute in a form.

I want to display the following:

    
    #error {
    border: 0.5em red solid;
    }
    
    #correct {
    border: 0.5em green solid;
    }
    
<p id="error"> Must have at least one checkbox checked</p>
<p id="correct"> At least one checkbox is checked</p>

Please provide an example function that's triggered by an onsubmit event attribute utilized in a form element.

did you do a quick search on Stackoverflow? These are very basic operations and have been answered before. — Deepak Kamat
– Deepak Kamat, Commented Jul 30, 2022 at 4:49

Sarah N · Accepted Answer · 2022-07-30 04:45:18Z

1

You can add a class to an element using classList.add. Here is an example: HTML File

.errorStyle {
    border: 0.5em red solid;
}
    
.correctStyle {
    border: 0.5em green solid;
}
    
<p id="error"> Must have at least one checkbox checked</p>
<p id="correct"> At least one checkbox is checked</p>
<button onclick="change()">Submit</button>

JS Function

function change() {
  var element = document.getElementById("error");
  element.classList.add("errorStyle");
  element.classList.add("correctStyle");
}

answered Jul 30, 2022 at 4:45

Sarah N

1012 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do you add/remove HTML ids/classes to elements using JavaScript? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related