I'm in the process of designing a website for an artist. The website includes a contact form, and I'm currently working on a JavaScript script to remove the hidden class that I applied to the commission rules section. The goal is to make this section visible when the user selects the Commission option in the form. While I am fairly new to JavaScript, after reading through some documentation, it seems like using the HTMLOptionElement type is the best approach to achieve this with vanilla JS. Below is the form and my attempt at removing the element:
<form action="action_page.php" id="contactform" method="post" action="FormToEmail.php">
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<select id="reason" name="contact-reason">
<option value="None" selected disabled hidden>Reason for contact</option>
<option value="Brand">Brand</option>
<option id="Comission"value="Comission">Commission</option>
<option value="Other">Other</option>
</select>
<a class="invis hidden center" href=""> Commission rules</a>
<textarea name="contact-message" class="feedback-input" placeholder="Comment"> </textarea>
<input type="submit" class="button form-buttion" value="SUBMIT"/>
</form>
I have attempted selecting by ID, tags, and various other selectors in my JavaScript code, as shown below.
var action = document.HTMLOptionElement("Commission")
if(action == true){
element.classList.remove("invis");
}