如何将单击的值存储到数组中并输出响应？答案

【问题标题】：How can I store values which are clicked into an array & output a response?如何将单击的值存储到数组中并输出响应？
【发布时间】：2019-12-16 10:56:51
【问题描述】：

我正在创建一个塔罗牌阅读游戏，用户点击 6 张牌，每张牌对它们都有意义。一旦他们选择的所有 6 张卡片都被点击，我希望在新页面中显示含义。

我需要帮助找到一种方法来获取所选卡片并存储它们，然后将每张卡片与一个含义联系起来。

我在想也许可以将选择的卡片存储到一个数组中，然后获取该数组并将其与描述相匹配，但我不知道如何在 JavaScript 中实现这一点。

我提供了一个我目前拥有的代码笔： https://codepen.io/cramos2/pen/oKEBPQ

我尝试为每个卡片 div 添加一个“onclick”事件侦听器，并将其链接到一个将其与类名匹配的函数，但这不起作用并破坏了代码。

<div class="card">
      <div class="card-back card-face card1" onclick=summary()>
       1
      </div>
      <div class="card-front card-face">
        The Hermit
      </div>
    </div>

function summary(){

  if(document.getElementByClassName('card1'){
     alert("card 1 has been clicked");
     }
}

我希望它能够识别选择了哪张卡片，并且我能够为卡片编写相应的文本

【问题讨论】：

if (document.getElementByClassName('card1')) 你缺少右括号。

标签： javascript html arrays

【解决方案1】：

试试这个：

function summary(e){
  if(e.classList.contains("card1")) {
    alert("card 1 has been clicked")
  }
}

<div class="card">
      <div class="card-back card-face card1" onclick="summary(this)">
       1
      </div>
      <div class="card-back card-face card2" onclick="summary(this)">
       2
      </div>
      <div class="card-front card-face">
        The Hermit
      </div>
    </div>

解释

html 中的onclick="summary(this)" 会将当前元素传递给函数摘要

if(e.classList.contains("card1")) {
    alert("card 1 has been clicked")
  }

将判断该元素在类列表中是否有card1...如果有，则弹出警告窗口

【讨论】：

【解决方案2】：

正如评论正确建议的那样，您当前的代码不起作用，因为缺少括号，它应该是：

if ( doThing() )

而不是

if ( doThing()

关于“如何”，我看到的最简单的方法是添加data-meaningattribute。

这样你就可以：

将相应的属性附加到代表卡片的每个 html 对象。
将事件侦听器附加到所有事件侦听器，该侦听器将调用回调传递 event element once 卡被点击。

它看起来像：

document.addEventListener(
   `click`,
   doThing
);

我们的摘要doThing 实际上需要做两件事。

更准确地说，它需要

从每个单击的对象中提取data-meaning 值（可以通过上述事件对象完成）。
以某种方式记录不同卡片被点击的次数，例如，pushing 表示数组并检查数组长度。

希望这会有所帮助！

【讨论】：