In jQuery, how do I add a user input value to a running total based on pre-defined values? -
this have far, albeit scaled down. want user click on pre-defined values, in first 2 divs, or click on "input custom value" brings focus #enter_custom input can enter own value. user add each value option total clicking "add total" after highlighting either predefined value or entering custom value. hope makes sense.
i cannot life of me user defined input value add total. not sure if need remove focus before can added. i've tried (and many more failures), perhaps using wrong approach -- blur() -- or, perhaps i'm on wrong track altogether. total displays nan i've tried. appreciated.
$(document).ready(function() { var $total = 0; $('#total').html($total); $('.activate').click(function() { $(this).addclass('selected'); $(this).siblings().removeclass('selected'); var $value = $(this).find('input').val(); var $totalchanger = parseint($value, 10); $('#add').click(function() { $('#total').html($total = $total + $totalchanger); $('div').removeclass('selected'); $('#enter_custom').val(''); $totalchanger = 0; }); /* $('#correct').click(function(){ */ $('#trigger_custom').click(function() { if ($total <= 0) { alert("you lose!"); } else { $('#enter_custom').focus(); } }); /* $('#trigger_custom').click(function(){ */ }); /* $('.activate').click(function(){ */ }); /* $(document).ready(function(){ */div { width: 170px; margin: 0 10px 20px 10px; border: thin solid #111; padding: 20px; text-align: center; cursor: pointer; } .selection:hover, .selected { background-color: #aaa; } #custom, #total { cursor: default; color: #111; } input { background-color: #fff; border: none; text-align: center; color: #111; box-shadow: none; cursor: pointer; } .value input { display: none; } input:hover { background-color: #fff; cursor: default; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="activate selection value"><input type="text" value="200" disabled/>200</div> <div class="activate selection value"><input type="text" value="400" disabled/>400</div> <div class="activate selection" id="trigger_custom">input custom value</div> <div id="custom"><input id="enter_custom" placeholder="( enter value here )" type="text"></div> <div class="selection" id="add">add total</div> <div id="total"></div> </body>
Comments
Post a Comment