Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <form action="/basket" method="post">
        
        <div class="cheesegroup">
            <div class="grouptitle">French Cheese</div>
            
            <div class="groupcontent">
                <label for="camembert" class="cheesename">Camembert ($18)</label>
                <input name="camembert" value="0"/>
                <span class="subtotal latent">($<span>0</span>)</span>
            </div>
            
            <div class="groupcontent">
                <label for="tomme" class="cheesename">Tomme de Savoie ($19)</label>
                <input name="tomme" value="0"/>
                <span class="subtotal latent">($<span>0</span>)</span>
            </div>            
            
            <div class="groupcontent">
                <label for="morbier" class="cheesename">Morbier ($9)</label>
                <input name="morbier" value="0"/>
                <span class="subtotal latent">($<span>0</span>)</span>                    
            </div>
            
            <div class="sumline"></div>
            <div class="groupcontent latent">
                <label class="cheesename">Total:</label>
                <input class="placeholder" name="spacer" value="0"/>
                <span class="subtotal latent" id="total">$0</span>                    
            </div>
        </div>
        
        
    </form>
  
</body>
</html>
 
 var priceData = {
        camembert: 18,
        tomme: 19,
        morbier: 9
    };
var nodeListLatent = document.getElementsByClassName('latent');
console.log(nodeListLatent.length);
for (var i = 0; i < nodeListLatent.length; ++i) {
  console.log(i);
  nodeListLatent[i].style.display='inline-block';  // 
}//pas de foreach
var nodeListInput = document.getElementsByTagName('input');
console.log(nodeListInput.length);
for (var i = 0; i < nodeListInput.length; ++i) {
  console.log("input =" + i);
  var item = nodeListInput[i];
  
    func=(function(x){
        return function(){
            cal(x);
        }
    })(item);
  
  if (item.addEventListener) {
                        item.addEventListener('keyup', func, false);
                    } else if (a.attachEvent) {
                        item.attachEvent('onclick', func);
                    } else {
                        throw 'Unsupported event model.';
                    }
  
  
  
}//pas de foreach
function cal(current) {
    var val = parseInt(current.value);
  if (val){
          current.style.background="";
    var subtotal = val * priceData[current.name];            
console.log(subtotal);
  //  $(this).siblings("span").children("span").text(subtotal)
   var next=current.nextElementSibling;
 console.log(next);
   var soustot=next.children;
  console.log(soustot.length);
  soustot[0].innerHTML=subtotal;
  }
  else{
    current.style.background="#f58809";
  }
}
/*
    $(document).ready(function() {
     
            
      
        //$('.latent').show();
        
        $('input').bind("change keyup", function() {  
          //reste à faire
             $(this).siblings("span").children("span").text(subtotal)
            calculateTotal();
        })       
    })
    
    function calculateTotal() {
        var total = 0;
        $('span.subtotal span').not('#total').each(function(index, elem) {
            total += Number($(elem).text());
        })
        $('#total').text("$" + total);
    }
*/
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dupontpro
0viewers