title: Indexing HTML div classes in JavaScript
body: <p>I am trying to compare two values of different div classes using the data attribute.  I have multiple div classes like these two, all with different data-vale:</p>
  
  <pre><code>&lt;div class="card" data-value=38&gt;
      &lt;img class ="front-face" src= "PNG/QH.png"/&gt;
    &lt;/div&gt;
  
    &lt;div class="card" data-value=39&gt;
      &lt;img class ="front-face" src= "PNG/KH.png"/&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Every div class will also receive a unique order using cards.style.order</p>
  
  <p>In a JS function the user will select two cards (firstCard,secondCard) and the function should check if the value of firstCard is one greater than the value of the card with order 1 more than secondCard.</p>
  
  <p>Here is the code I have been trying to use:</p>
  
  <pre><code>const cards = document.querySelectorAll('.card');
  
  if(firstCard.dataset.value === cards[cards.indexOf(secondCard)-1].dataset.value)
  </code></pre>
  
  <p>cards is an array housing all of my div classes.  One of the errors I received told my that indexOf is not a usable function here.  I think this may be because the div classes are not actually part of an array and I need a different method to find the 'value of' something rather than the 'index of'.</p>
  
  <p>For example, if a row of cards goes 2D,7S,9D,8H,3D,  the user can click 3D for firstCard and 7S for secondCard.  The function will verify that the value of 3D is one greater than 2D and will swap the positions of 3D and 7S.</p>