Записать обновленный массив после нажатия кнопки (javascript) - PullRequest
Новая
       0

Записать обновленный массив после нажатия кнопки (javascript)

0 голосов
/ 09 июля 2020

В этом меню кнопок пользователь может выбрать несколько кнопок и отправить окончательный ответ, нажав кнопку «Готово». Они могут изменить свой ответ, отменив выбор кнопок, но, опять же, их окончательный ответ должен быть отправлен после нажатия кнопки «Готово».

В настоящее время я могу записывать каждый выбор кнопки при нажатии и обновлять массив в процессе. Однако я хотел бы только записать окончательный ответ. Хотя в этом примере с игрушкой я записываю локально на консоль, я отправляю данные на сервер в моем реальном коде.

Я закомментировал, где бы я печатал при каждом щелчке - просто оставив его там для пояснительной ясности. Опять же, я надеюсь напечатать окончательный ответ только после того, как пользователь нажмет кнопку «Готово». Я думаю, что сталкиваюсь с проблемой определения области видимости в том, что массив «щелкнул» не существует вне функции карты. Но я не знаю, как решить проблему. У кого-нибудь есть решение?

Заранее всем спасибо! (Также открыты для внесения предложений по редактированию, если что-то неясно!) 

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    #done {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }
  </style>
</head>

<body>
  <div id="buttonGallery">
    <div id="done">
      <p>done</p>
    </div>
  </div>
  <script type="text/javascript">
    let $buttonGallery = $("#buttonGallery");
    let myList = ["A", "B", "C", "D"];
    let myColors = ["red", "green", "blue", "red"];
    let clicked = [];

    myList.map(function(letter, index) {
      let clicked = [];
      let $button = $("<div></div>")
        .addClass("buttons")
        .attr("id", "button_" + letter)
        .html("<p>" + letter + "</p>")
        .on("mouseenter", function() {
          $(this).css("background", myColors[index]);
        })
        .on("mouseleave", function() {
          if (!$(this).hasClass('selected')) {
            $(this).css("background", "transparent");
          }
        })
        .on("click", function() {
          $(this).css("background", myColors[index]);
          $(this).toggleClass('selected');
          clicked = [];

          // push clicked variables to array
          let syms = document.querySelectorAll('.selected');

          for (let n = 0; n < syms.length; n++) {
            if (!clicked.includes(syms[n].textContent)) {
              clicked.push(syms[n].textContent);
            }
          };

          // send data to server
          // console.log('clicked array', clicked);
        })
      $("#done").before($button);
    });

    $("#done").on("click", clearColor);

    function clearColor() {
      console.log('clicked array', clicked);

      $(".buttons").css({
        backgroundColor: 'transparent'
      });
      $(".buttons").removeClass('selected');

      // reset clicked list after recording button selections
      clicked = [];
    }
  </script>
</body>
</script>

</html>

1 Ответ

0 голосов
/ 09 июля 2020

У вас есть let clicked = [] на карте, поэтому он становится массивом clicked в области для добавления значений, в которые щелкнули. Вы добавляете к этому «внутреннему» массиву clicked, но ваша функция clearColor() смотрела на «внешний» массив clicked, который оставался пустым. Вам просто нужно удалить строку let clicked = []; внутри вашего map()

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    #done {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }
  </style>
</head>

<body>
  <div id="buttonGallery">
    <div id="done">
      <p>done</p>
    </div>
  </div>
  <script type="text/javascript">
    let $buttonGallery = $("#buttonGallery");
    let myList = ["A", "B", "C", "D"];
    let myColors = ["red", "green", "blue", "red"];
    let clicked = [];

    myList.map(function(letter, index) {
      //let clicked = []; <-- don't re-declare it here
      let $button = $("<div></div>")
        .addClass("buttons")
        .attr("id", "button_" + letter)
        .html("<p>" + letter + "</p>")
        .on("mouseenter", function() {
          $(this).css("background", myColors[index]);
        })
        .on("mouseleave", function() {
          if (!$(this).hasClass('selected')) {
            $(this).css("background", "transparent");
          }
        })
        .on("click", function() {
          $(this).css("background", myColors[index]);
          $(this).toggleClass('selected');
          clicked = [];

          // push clicked variables to array
          let syms = document.querySelectorAll('.selected');

          for (let n = 0; n < syms.length; n++) {
            if (!clicked.includes(syms[n].textContent)) {
              clicked.push(syms[n].textContent);
            }
          };

          // send data to server
          // console.log('clicked array', clicked);
        })
      $("#done").before($button);
    });

    $("#done").on("click", clearColor);

    function clearColor() {
      console.log('clicked array', clicked);

      $(".buttons").css({
        backgroundColor: 'transparent'
      });
      $(".buttons").removeClass('selected');

      // reset clicked list after recording button selections
      clicked = [];
    }
  </script>
</body>
</script>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...