jQuery toggleClass example

Toggle class name on click in jQuery

by Joe Saad

HTML

<div id="banner-message">
  <p id="sum">Sum: </p>
<input type="text" id="item1">
<input type="text" id="item2">
<input type="text" id="item3">
<input type="text" id="item4">
<input type="text" id="item5">
<input type="text" id="item6">
<input type="text" id="item7">
<input type="text" id="item8">
<input type="text" id="item9">
<input type="text" id="item10">
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")
var sum = 0;
var arr = []

var val;
/*
$('input').keyup(function(){
		 arr = [...this.value]
		 sum = arr.reduce((a,b)=> a+b)
		 let s = document.getElementById('sum')
		 s.innerHTML = sum;
})
*/

$('input').keyup(function(){
sum = 0;
   $('input').each(function(){
	    let inputVal = Number(this.value)
//			console.log(this.value)
//			console.log(inputVal)
	    sum = parseInt(sum) + parseInt(inputVal);			
	 })
	 	let s = document.getElementById('sum')
		 s.innerHTML = sum;

})