Почему я все еще получаю неопределенный возврат из метода array.find()?

#javascript #arrays #find

#javascript #массивы #Найти

Вопрос:

Кажется, я продолжаю получать неопределенный возврат из метода find(), прикрепленного к моему массиву продуктов. Я не уверен, почему. Условие в моей функции обратного вызова должно быть true . Кто-нибудь может сказать мне, в чем может быть причина?

Пожалуйста, дайте мне знать, если мне нужно добавить больше информации. Спасибо

     ``` html
    <img class = "image" id = "image" src = " " alt = "activeimage">
    <div class = "button" id = "btn1"></div>
    <span id = "colorlabel"> </span>
    
    <button id = "addtocartBtn" type = "button">Add To Cart</button>
    ```
    
    ``` js
    $("#btn1").on("click", function(){
    $('#image').attr("src", "assets/chad.jpg");
    $('#colorlabel').text("Black/Black/Black");
    ```
    ``` js
    let addToCart = document.querySelector('button#addtocartBtn');
    let products = [
      {
        name: "Black/Black/Black",
        tag: 'black/black/black',
        price: 21.99,
        inCart: 0
        },
      {
        name: "Navy/Navy/Navy",
        tag: 'navy/navy/navy',
        price: 21.99,
        inCart: 0
        },
      {
        name: "Off-White/Off-White/Off-White",
        tag: 'off-white/off-white/off-white',
        price: 21.99,
        inCart: 0
          }
         ];
    let myProduct = products.find(element => {
      let spancolorLabel = document.querySelector('span#colorlabel');
      let spanTextContent = spancolorLabel.textContent;
      let stringify = JSON.stringify(element.name);
      return (stringify == spanTextContent);
    })
    addToCart.addEventListener("click", () => {
      console.log(myProduct);
    })
    ```

1. Я попытался очистить форматирование вашего кода, но я думаю, что вы не совсем правильно все добавили. Не могли бы вы, пожалуйста, просмотреть его?

2. Извините за форматирование. Я перебирал это, имеет ли значение, что моя функция обратного вызова сравнивает переменные? Я протестировал метод add для переменных и примитивных типов данных, и он работает нормально.

Ответ №1:

Вместо ‘#btn1’ используйте ‘#addtocartBtn’, чтобы выбрать правильную кнопку.

Также вам не нужно использовать JSON.stringify, просто используйте element.name чтобы сравнить строку со строкой, эта функция возвращает element.name вот так «»Черный/Черный/Черный»»

Ответ №2:

Лучше попробуйте этот приведенный ниже код,

 let myProduct = products.find(element => {   
  let colorLabel = document.querySelector('span#colorlabel');   
  let spanTextContent = spancolorLabel.textContent;   
  let stringify = element.name;  // Here is the change   
  return (stringify == spanTextContent); 
});

Вы пытаетесь упорядочить строковое значение, поэтому оно может сравнивать «значение» вместо «значение».