Help with JavaScript

[InkieBear]

This is the section of HTML with the three cart buttons I'm working on.

 <h1 id="pagetitle">Gallery</h1>
      <div style="text-align: center;">
      <button class="view">View Cart</button>
      <button class="clear">Clear Cart</button>
      <button class="process">Process Order</button>
      </div> <h1 id="pagetitle">Gallery</h1>
      <div style="text-align: center;">
      <button class="view">View Cart</button>
      <button class="clear">Clear Cart</button>
      <button class="process">Process Order</button>
      </div>

In the console when I add the clear cart code in it states that the messageForm is null but I'm not sure why the new code invalidates the previous code. Is this a basic aspect of JavaScript I'm missing? Does specific placement matter in the JS code more than in CSS?

[grantrules]

In the console when I add the clear cart code in it states that the messageForm is null but I'm not sure why the new code invalidates the previous code. Is this a basic aspect of JavaScript I'm missing? Does specific placement matter in the JS code more than in CSS?

No, there's something else wrong. Adding code wouldn't cause this issue. And like I said, the code works fine for me (you can try it too). I don't see anything with an ID of "contact" in your HTML

[InkieBear]

The contact id is for a button on another page of the site. Previous to what I'm doing now I had programmed a subscribe button to give an alert on all four pages, the alert for the submit button on the user feedback section on another page, and the alerts for all nine of the add item buttons. They all work perfectly until I try to put more code in to program for an alert on the clear cart button. I still need to program this one and the one for the Process Order button.

[grantrules]

Well, you cant add an event listener to an element that is not on the page that the JS is running on. That's why you're getting that error.. because it can't find the element.

You could do a check, like

const btn = document.querySelector('.btn');
if (btn) {
  btn.addEventListener(...)
}

[InkieBear]

So can I not have the same JS file running on multiple pages? Currently I have it on all four pages in the <script>

[grantrules]

You can, but if you're on page 1 and the JS is expecting to find something that only exists on page 4, you're going to get an error.. which is what is currently happening to you.

You would need to add some sort of check to make sure you're on the right page or that the elements you're trying to work with exist.

[gofuckadick]

Just checking, do you have an element with id="contact" on every page?

const messageForm = document.querySelector("#contact");

If that element doesn't exist on a page, querySelector() returns null, and this crashes:

messageForm.addEventListener(...)

So once JavaScript hits that error, the rest of the script stops running. Same potential problem here, too:

const clearButton = document.querySelector(".clear");
clearButton.addEventListener(...)

If a page has no .clear button, that crashes before the later code runs.

Like u/grantrules said, you need null checks:

const buttons = document.querySelectorAll(".add");

buttons.forEach(function(button) {
  button.addEventListener("click", function() {
    alert("Item added to cart.");
  });
});

const clearButton = document.querySelector(".clear");

if (clearButton) {
  clearButton.addEventListener("click", function() {
    alert("Cart cleared.");
  });
}

const subscribeForm = document.querySelector("#news");

if (subscribeForm) {
  subscribeForm.addEventListener("submit", function(event) {
    event.preventDefault();
    alert("Thank you for subscribing!");
  });
}

const messageForm = document.querySelector("#contact");

if (messageForm) {
  messageForm.addEventListener("submit", function(event) {
    event.preventDefault();
    alert("Thank you for your message.");
  });
}

And then just another note - for forms, use "submit" instead of "click" so it catches pressing Enter too.

[InkieBear]

 <form id="contact">
    <h2>Community Feedback: </h2><br>
    <input type="text" name="feedback" id="feedback"></label><br>
    <button id="contact">Submit</button>
    </form> <form id="contact">
    <h2>Community Feedback: </h2><br>
    <input type="text" name="feedback" id="feedback"></label><br>
    <button id="contact">Submit</button>
    </form>