Show text based on var value

Question

I need this interactive element, where a user can toggle various buttons. Some buttons have the value of 4, and others of 1 and 0. When the toggled buttons add up to ie. 8, a text will be shown. And if it's 4 another text will be shown and so on.

Can anyone help me with the code below, as I can't seem to get it to work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.selected {
color: red;
}
</style>

<button class="toggle" value=4>Car</button>
<button class="toggle" value=4>House</button>
<button class="toggle" value=1>MC</button>
<button class="toggle" value=1>Moped</button>
<button class="toggle" value=0>Life</button>
<button class="toggle" value=0>Dog</button>
<br/><br/>
<div class="demo"><div>


<script>
var totalAmount = 0;
$(document).ready(function() {
$('.toggle').on('click', function() {
    var value = $(this).val();
    if($(this).hasClass('selected')) {
       $(this).removeClass('selected');
       totalAmount = parseInt(totalAmount) - parseInt(value);
    }
    else {
      $(this).addClass('selected');
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }    
   });
});


if (totalAmount >= 9 ) {
  document.getElementById("demo").innerHTML = "A text to be here if 
totalAmount is higher or equal than 9"
};

else if (totalAmount < 9 && > 4) {
    document.getElementById("demo").innerHTML = "A text to be here if 
totalAmount is higher than 4 and less than 9"
}; 

else if (totalAmount <= 4) {
    document.getElementById("demo").innerHTML = "A text to be here if 
totalAmount is less or equal to 4"
};

else { 
  document.getElementById("demo").innerHTML = "A text to be here if nothing 
else is"
};
</script>

Answer 1

1. There are syntax error, write else block properly i.e. if(){}else{}
2. condition should be totalAmount < 9 && totalAmount > 4 not totalAmount < 9 && > 4
3. Move else if-else block in event handler.
4. Use ID attribute when using document.getElementById() function

var totalAmount = 0;
$(document).ready(function() {
  $('.toggle').on('click', function() {
    var value = $(this).val();
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      totalAmount = parseInt(totalAmount) - parseInt(value);
    } else {
      $(this).addClass('selected');
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }
console.log(totalAmount)
    if (totalAmount >= 9) {
      document.getElementById("demo").innerHTML = "A text to be here if totalAmount is higher or equal than 9"
    } else if (totalAmount < 9 && totalAmount > 4) {
      document.getElementById("demo").innerHTML = "A text to be here if totalAmount is higher than 4 and less than 9"
    } else if (totalAmount <= 4 && totalAmount > 1) {
      document.getElementById("demo").innerHTML = "A text to be here if totalAmount is less or equal to 4"
    } else {
      document.getElementById("demo").innerHTML = "A text to be here if nothing else is"
    };
  });
});

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="toggle" value=4>Car</button>
<button class="toggle" value=4>House</button>
<button class="toggle" value=1>MC</button>
<button class="toggle" value=1>Moped</button>
<button class="toggle" value=0>Life</button>
<button class="toggle" value=0>Dog</button>
<br/><br/>
<div id="demo">
  <div>