Using classes breaks my code by IDs don't

Question

When I use IDs in my HTML and select them in my javascript code with the getElementByID, my code works, but when I change them to classes my code does not work anymore.

I would like to use classes because I am working on a project with someone else who prefers classes.

Also, does it make a difference using classes vs IDs for javascript code?

const email = document.getElementsByClassName('email');
const form = document.getElementsByClassName('form');
const emailMessage = document.getElementsByClassName('empty-email-message');
const errorEmail = document.getElementsByClassName('invalid-email-message');

form.addEventListener('submit', e => {
  if (!email.value) {
    e.preventDefault();
    emailMessage.innerHTML = 'where is the email';
  } else {
    emailMessage.innerHTML = '';
    // return true;
  }
});

<form class="form" id="form" action="submit">
            <input class="email" type="email"/>
            <button type="submit">Go</button>
            <!-- dont use id -->
            <p class="empty-email-message"></p>
            <p class="invalid-email-message"></p>
          </form>

const email = document.getElementById('email');
const form = document.getElementById('form');
const emailMessage = document.getElementById('empty-email-message');
const errorEmail = document.getElementById('invalid-email-message');

form.addEventListener('submit', e => {
  if (!email.value) {
    e.preventDefault();
    emailMessage.innerHTML = 'where is the email';
  } else {
    emailMessage.innerHTML = '';
    // return true;
  }
});

<form class="form" id="form" action="submit">
            <input id="email" type="email"/>
            <button type="submit">Go</button>
            <!-- dont use id -->
            <p id="empty-email-message"></p>
            <p id="invalid-email-message"></p>
          </form>

@db1975 just fixed that. It was related to another part of my code — Hesam Alavi, Feb 17 '20 at 23:42

score 1 · Answer 1 · answered Feb 17 '20 at 23:38

1

Use ID when there is only one of them and you need to refer to it directly. It wouldn't make as much sense to use classes given that the idea of classes is to have multiple but the JavaScript can only get one.

You can go for getElementsByClassName but like I said if you are only getting one then use IDs.

answered Feb 17 '20 at 23:38

MomasVII

4,641
5
35
52

Sure thing, but just as a practice and to learn, how can I modify the code for it to work with classes? – Hesam Alavi Feb 17 '20 at 23:39
`getElementsByClassName ` is usually the alternative. I think it returns an array. Just check the documentation – MomasVII Feb 17 '20 at 23:44

score 1 · Accepted Answer · answered Feb 17 '20 at 23:44

You can use this, but its better to use with Ids:

const email = document.getElementsByClassName('email')[0];
const form = document.getElementsByClassName('form')[0];
const emailMessage = document.getElementsByClassName('empty-email-message')[0];
const errorEmail = document.getElementsByClassName('invalid-email-message')[0];

form.addEventListener('submit', e => {
  if (!email.value) {
    e.preventDefault();
    emailMessage.innerHTML = 'where is the email';
  } else {
    emailMessage.innerHTML = '';
    // return true;
  }
});

<form class="form" id="form" action="submit">
            <input class="email" type="email"/>
            <button type="submit">Go</button>
            <!-- dont use id -->
            <p class="empty-email-message"></p>
            <p class="invalid-email-message"></p>
          </form>

Using classes breaks my code by IDs don't

2 Answers2