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

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, Jul 30 '22 at 04:49

score 1 · Answer 1 · answered Jul 30 '22 at 04:45

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");
}

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

1 Answers1