adding values from DOM to an array
<p>I am stuck at this, and all help would be appreciated it. I am trying to add the values to an array. right now I am trying to identify if there is a quantity on my input, if there isn't then I am to add item price times quantity. but is adding all the prices, including the ones that have no quantity on the input.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', init);
var cartArray = [];
var ItemNode, quantityNode, costNode, submitButton, subtotalNode, totalNode, output;

function init(){
 itemNode = document.querySelector('.input-item');
 costNode = document.querySelectorAll('.posterPrice');
 quantityNode = document.querySelectorAll('.qtyValue');
 submitButton = document.querySelectorAll("button");
 subtotalNode = document.getElementById('subtotal');
 totalNode = document.querySelector('#total');
 output = document.querySelector('.output');
  
 for (var i = 0; i &lt; submitButton.length; i++){
  submitButton[i].addEventListener('click', function(event){
  addPrice();
 });
 }
}



function addPrice(){
 addToCart();
}

function addToCart(){
 for (var k = 0; k &lt; quantityNode.length; k++){
  for (var j = 0; j &lt; costNode.length; j++){
  if(quantityNode[k].value !== false){
   cartArray.push(costNode[j].innerText * quantityNode[k].value);
  }
 } 
 console.log(cartArray);  
}

}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/** {
 outline: 2px solid red;
}
*/
#poster1 {
 background-image: url(img/poster7.png);
 background-size: 100% 100%;
 width: 200px;
 height: 300px;
 background-color: blue;
 display: inline-block;
}

#poster2 {
 background-image: url(img/poster2.jpg);
 background-size: 100% 100%;
 width: 300px;
 height: 200px;
 background-color: blue;
 display: inline-block;
}

.posterInfo {
 position: relative;
 margin-top: 300px;
}

.posterInfo input {
 width: 45px;
}
/*.wrapper input {
 width: 45px;
 display: block;
}*/

.total {
 position: absolute;
 bottom: 0;
 right: 0;
 margin: 50px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Gallery&lt;/title&gt;
 &lt;link rel="stylesheet" href="style.css"&gt;
 &lt;script src="main.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1 id='test'&gt;Posters&lt;/h1&gt;
 &lt;div class="posters"&gt;
  &lt;div id="poster1"&gt;
   &lt;div class="posterInfo"&gt;
    &lt;p&gt;Price: $&lt;span class="posterPrice"&gt;2.50&lt;/span&gt;&lt;/p&gt;
    &lt;label for="qty" class="input-quantity"&gt;QTY:&lt;/label&gt;
    &lt;input type="number" name="qty" class="qtyValue"&gt;
    &lt;button class="input-submit"&gt;Add to Cart&lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="poster2"&gt;
   &lt;div class="posterInfo"&gt;
    &lt;p&gt;Price: $&lt;span class="posterPrice"&gt;3.50&lt;/span&gt;&lt;/p&gt;
    &lt;label for="qty" class="input-quantity"&gt;QTY:&lt;/label&gt;
    &lt;input type="number" name="qty" class="qtyValue"&gt;
    &lt;button class="input-submit"&gt;Add to Cart&lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;

  &lt;div id="poster3"&gt;&lt;/div&gt;
  &lt;div id="poster4"&gt;&lt;/div&gt;
  &lt;div id="poster5"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="total output"&gt;
  &lt;p&gt;Subtotal: $&lt;span id="subtotal"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;Taxes: &lt;span&gt;$10.00&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;Shipping: &lt;span&gt;$10.00&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;Total: $&lt;span id="total"&gt;&lt;/span&gt;&lt;/p&gt; 
 &lt;/div&gt;
 &lt;!--&lt;script src="main.js"&gt;&lt;/script&gt;--&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>