0

I want to add .show class to an element if it contains the class .CNC_Machinery.

Out of some reason this is not working. When I try to use the variable "CNC_Machining_Class_In_AnchorTag" in my code my console returns a ReferenceError, however when I console.log(CNC_Machining_Class_In_AnchorTag ); I get the proper response in the console.

See Bellow: The 1st part of code applies an .active class to the button clicked.

The 2nd part of the code should apply .show to the button clicked on.

I tried puttin the variable "CNC_Machining_Class_In_AnchorTag" inside the function, and console.log() from there, but when I try that. It doesn't even console.log();

The only thing that works is if I remove the first part of the code. Then I get the proper reaction. Could this be that there are two click events on the element/object? How would I solve if this is the case?

HTML & PHP:

<section class="gallery-links">
<div class="wrapper">
  <h2 class="product-gallery-title">Product Gallery</h2>

  <div class="gallery-container">
    <?php
    include_once 'includes/dbh.inc.php';

    $sql = 'SELECT * FROM gallery ORDER BY orderGallery DESC';
    $stmt = mysqli_stmt_init($conn);
    if (!mysqli_stmt_prepare($stmt,$sql)) {
      echo 'SQL statement failed!';
    } else {
      mysqli_stmt_execute($stmt);
      $result = mysqli_stmt_get_result($stmt);

      while ($row = mysqli_fetch_assoc($result)) {
        //what's echoed out by the database

        echo '  <a class="images '.$row["image_category"].'" style="background-repeat:no-repeat; background-image: url(gallery/'.$row["imgFullNameGallery"].')">
                <div class="color-overlay">
                <h3>'.$row["titleGallery"].'</h3>
                <p>'.$row["descGallery"].'</p>
                </div>
                </a>';
      }
    }


    ?>  

  </div>

1st Part of JS CODE:

// The button which would be used to add 'active' class to
    // all the buttons.
    let allButton = document.querySelector('#All');

    let btns = Array.from(document.querySelectorAll('.category-button'));
    let activeButton = null;

    const handleClick = (e) => {
      e.preventDefault();
      e.currentTarget.classList.add('active');
      // Checks that the activeButton is defined (initially it's null).
      // Also checks that the button that was clicked is not the button which is
      // already active to avoid removing the active class on double click.
      if (activeButton != null && activeButton != e.currentTarget) {
        activeButton.classList.remove('active');
      }
      activeButton = e.currentTarget;
    }

    btns.forEach(node => {
      node.addEventListener('click', handleClick)
    });

    // Listen to a click event from the "allButton" and when it's clicked,
    // loop through the buttons array and add 'active' class to all buttons
    // in it.
    allButton.addEventListener('click', function() {
        btns.forEach(btn => {
            btn.classList.add('active');
        })
    });

2nd Part of JS CODE:

      let category_btn = document.getElementsByClassName('category-button');
      console.log(category_btn);

      let CNC_Mach_btn = document.getElementById("CNC_Machining_button");
      let CNC_Machining_Class_In_AnchorTag = document.getElementsByClassName("CNC_Machinery");

      console.log(CNC_Machining_Class_In_AnchorTag) //shows in console

      CNC_Mach_btn.addEventListener("click", function() {
        let CNC_Machining_Class_In_AnchorTag = document.getElementsByClassName("CNC_Machinery");
        console.log(CNC_Machining_Class_In_AnchorTag) // does not show in console
        // if the the CNC_Machining button is active make classes with Images with CNC_Machining active. 
        if (CNC_Mach_btn.classList.contains("active")) {
          CNC_Machining_Class_In_AnchorTag.classList.add("show");
        }
    });

Expected Result: .show should be added to anchor tag which contains .CNC_Machinery

Actual Result: .show is not added to anchor tag which contains .CNC_Machinery

Dan
  • 111
  • 1
  • 13

0 Answers0