jQuery addClass example

Change class name on click in jQuery

by Şuayip Ekmekci

HTML

<div id="sonuc"></div>
<br/>
<ul>
<li class="number" data-type="9">9</li>
<li class="number" data-type="8">8</li>
<li class="number" data-type="7">7</li>
<li class="number" data-type="6">6</li>
<li class="number" data-type="5">5</li>
<li class="number" data-type="4">4</li>
<li class="number" data-type="3">3</li>
<li class="number" data-type="2">2</li>
<li class="number" data-type="1">1</li>
<li class="number" data-type="0">0</li>
</ul>
<br/>
<ul>
<li class="islem" data-type="+">+</li>
<li class="islem" data-type="-">-</li>
<li class="islem" data-type="*">*</li>
<li class="islem" data-type="/">/</li>
<li class="islem" data-type="=">=</li>
</ul>

CSS

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

#sonuc{
  border:1px solid #fff;
  min-width:150px;
  height:30px;
  text-align:center;
}

br{
  clear:both;
}

ul{
  list-style:none;
  margin:0;
  padding:0;
}

li{
  padding:10px 15px;
  margin:5px;
  border:1px solid #fff;
  display:inline-block;
  min-width:10px;
  text-align:center;
}

JavaScript

$('.number').on("click", function(e){
let _target = e.target;
  result("number" , _target.getAttribute('data-type'))
})

$('.islem').on("click", function(e){
let _target = e.target;
  result("islem" , _target.getAttribute('data-type'))
})
var number1 = "",number2 = "",islem = "", sonuc = "";
function result(type , code) {
console.log(type);
	if(type == "number") {
  	if(type != "islem" && islem == ""){
    	number1 += code;
      number2 = "";
      islem = "";
    }else{
    	number2 += code;
    }
  } else {
  	islem = code;
    if (code == "=") {
      sonuc = eval(document.getElementById("sonuc").innerHTML)
      number1 = "";
      number2 = "";
      islem = "";
      document.getElementById("sonuc").innerHTML = sonuc
      return false
    }
  } 
  
  document.getElementById("sonuc").innerHTML = ( number1 + ' ' +islem+ ' ' +number2)
}