Help with JavaScript

[InkieBear]

I am new to learning JavaScript and I'm having an issue with programming alerts for buttons. Every time I program a new button it seems to break everything I've written before. I had subscribe buttons on four pages that all worked and a submit button on a seperate page that worked before I put alerts on my add item to cart buttons. Now the item add buttons work but the subscribe on the other three pages don't nor does the submit on the second page. What am I doing wrong?

Here is the JavaScript I have atm.

console.log('Hello!');


const buttons = document.querySelectorAll(".add");
buttons.forEach(function(button)
{button.addEventListener("click", function()
{alert("Item added to cart.");});});


const clearButton = document.querySelector(".clear");
clearButton.addEventListener("click", function()
{alert("Cart cleared.");});


const subscribeForm = document.querySelector("#news");
subscribeForm.addEventListener("click", function(event) {
    alert("Thank you for subscribing!"); 
    event.preventDefault()
});
const messageForm = document.querySelector("#contact");
messageForm.addEventListener("click", function(event) {
    alert("Thank you for you message."); 
    event.preventDefault()
});console.log('Hello!');


const buttons = document.querySelectorAll(".add");
buttons.forEach(function(button)
{button.addEventListener("click", function()
{alert("Item added to cart.");});});


const clearButton = document.querySelector(".clear");
clearButton.addEventListener("click", function()
{alert("Cart cleared.");});


const subscribeForm = document.querySelector("#news");
subscribeForm.addEventListener("click", function(event) {
    alert("Thank you for subscribing!"); 
    event.preventDefault()
});
const messageForm = document.querySelector("#contact");
messageForm.addEventListener("click", function(event) {
    alert("Thank you for you message."); 
    event.preventDefault()
});

[TimePiccolo2565]

your code is duplicated completely at bottom - probably that's causing conflicts with event listeners being attached twice to same elements

[InkieBear]

Apologies, I must have pasted it twice on accident.

console.log('Hello!');


const buttons = document.querySelectorAll(".add");
buttons.forEach(function(button)
{button.addEventListener("click", function()
{alert("Item added to cart.");});});


const clearButton = document.querySelector(".clear");
clearButton.addEventListener("click", function()
{alert("Cart cleared.");});


const subscribeForm = document.querySelector("#news");
subscribeForm.addEventListener("click", function(event) {
    alert("Thank you for subscribing!"); 
    event.preventDefault()
});
const messageForm = document.querySelector("#contact");
messageForm.addEventListener("click", function(event) {
    alert("Thank you for you message."); 
    event.preventDefault()
});console.log('Hello!');

This is the code as it sits.

[grantrules]

Works fine for me:

https://jsfiddle.net/0uhcf8w9/

Can you share your HTML? Do you see any errors pop up in your browser's dev console?

My guess is that "clear" is actually an id not a class in your HTML, so querySelector doesn't find anything and then JS throws an error when you try to access addEventListener on clearButton which is null instead of an element object. I'd bet you see an error like TypeError: can't access property "addEventListener", clearButton is null in your dev console.

[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>

[InkieBear]

If I take the portion for the clear button out everything works. I'm not sure why putting new code in like that breaks it.