This is my schema and controller js:

const foodSchema = new mongoose.Schema({
  foodName: {
    type: String,
    required: [true, "A food must have a name"],
  },
  Link: {
    type: String,
    required: [true, "A food must have a link"],
    unique: true,
  },
  emoji: {
    type: String,
  },
});

const Food = require("../models/foodModel");
Food.find({}, function (err, foundItems) {
    res.status(200).render("icook", {
      foodName: foundItems,
    });
  });

icook.ejs

<div  >
  <% for(let i=0; i<foodName.length; i  ) { %>
     <button  id="click">
       <%- foodName[i].emoji %> <%= foodName[i].foodName %>  
     </button>
  <% } %>
</div>
<div >
 Let&apos;s see what&apos;s delicacy for today!
   <% for(let i=0; i<foodName.length; i  ) { %>
     <p   id="try"><a href="<%= foodName[i].Link %>" role="button"><%= foodName[i].foodName %></a></p>
   <% } %>
</div>

My display.js

let b = 1;
var Test = document.getElementsByClassName("meat-butn-on");
var btn = document.getElementsByClassName("testing");

for (let i = 0; i < Test.length; i  ) {
  Test[i].onclick = function () {
    b  ;
    if (b % 2 == 0) {
      btn.style.display = "block";
    } else {
      btn.style.display = "none";
    }
  };
}

everything works perfect except this display.js, when i click any button from class meat-butn-on, the console shows the error Cannot set properties of undefined (setting 'display') why is that? I tried use class name from div class but it didn't work either. appreciate any helps

CodePudding user response：

Here's the working code. querySelectorAll returns an iterable array of elements, so you'd better use it.

let b = 1;

var meatButtons = document.querySelectorAll(".meat-butn-on");
var foodNames= document.querySelectorAll(".testing");
console.log(meatButtons, foodNames);

meatButtons.forEach((t, i) => {
  t.addEventListener("click", function () {
    b  ;
    if (b % 2 == 0) {
      foodNames[i].style.display = "block";
    } else {
      foodNames[i].style.display = "none";
    }
  });
});

<div >

  <button >
    Food Name1
  </button>
  <button >
    Food Name2
  </button>
  <button >
    Food Name3
  </button>

</div>
<div >
  Let&apos;s see what&apos;s delicacy for today!

  <p ><a href="#" role="button">Food Name1</a></p>
  <p ><a href="#" role="button">Food Name2</a></p>
  <p ><a href="#" role="button">Food Name3</a></p>

</div>

Live demo here: https://codepen.io/dreambold/pen/dyKBJXK?editors=1111

PS: You have an issue assigning the same id for the buttons, id="click". You should remove this from the buttons, as id's should be unique in a document. The same error is happening in the next paragraph for p tags.

So the code for the buttons will look like this:

<button >
   <%- foodName[i].emoji %> <%= foodName[i].foodName %>  
</button>