Joseph McKenzie Joseph McKenzie - 6 months ago 14
CSS Question

How do I count the number of comments entered made on my website

I have a website that I currently can tell how many answers from the various dropdown menus have been selected. Now I want to be able to count the comments made that are inside the textarea tag. I have a js fiddle for what I basically have.

https://jsfiddle.net/josephmckenzie/Lr1evv3v/3/

When you click the comment link it will open an accordion with a comment box under the current dropdown, and once entered they go on to next question. They should both count up (dropdown counter works already), and if a comment is entered in conjunction with the menu selection, the comment counter should count up as well.

<div class="QuestionsAnswered">
summary<br>
Total = <span class="cnt-total">0</span> <br>
</div>

<select name="firstone">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="na">N/A</option>
</select>

<div class="accordion">Comment</div>
<div class="panel">
<textarea name="comment<%=index%>" rows="4" cols="15"></textarea>
</div>


<select name="secondone">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="na">N/A</option>
</select>


the js

$('select').change(function() {
// get all selects
var allSelects = $('select')
var total = 0;

// for each select increase count
$.each(allSelects, function(i, s) {
// increase count
if($(s).val() == 'Yes' ) { total++; }
if($(s).val() == 'No') { total++; }
if($(s).val() == 'na') { total++; }
});

$('.cnt-total').text(total);

});

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
};


I've tried changing the select to text area and the .val != to a blank string and a few other things but alas I come to you Stack

rsn rsn
Answer

Make sure 'total' is a global variable, so take it out of your $(.'select').change(function()) (https://jsfiddle.net/Lr1evv3v/7/).

$("#the_answer").on("blur", function(){
 $(this).val() ? total++ : total--;
 $('.cnt-total').text(total); //to update the total text
});