CODEWITHSUNDEEP
javascriptvue.js
moonzen boss
moonzen boss

Reputation: 55

Adding numbers based on checkboxes

So i have 3 booleans for 3 checkboxes, the idea is i need a function to add some value based on which checkbox is checked, when i console.log(sum), i get nothing

calculateNumber() {
      const sum = 0
      if (this.ruleForm.ownerBoolean === true) { return sum + 1 }
      if (this.ruleForm.agentBoolean === true) { return sum + 2 }
      if (this.ruleForm.operatorBoolean === true) { return sum + 4 }
      console.log(sum)
    }

The idea is if the first checkbox is checked add 1, if the second add 2, if the third add 4, i need the final value for that to be summed, what i m doing wrong?

Upvotes: 1

Views: 306

Answers (5)

Vimukthi Jayasinghe
Vimukthi Jayasinghe

Reputation: 119

I have written a simple fiddle for this. follow this approach to achieve your need.

HTML

var demo = new Vue({
  el: '#demo',
  data: {
    sum: 0,
    mainCategories: [{
        id: 1,
        name:"ownerBoolean"
      }, {
        id: 2,
        name:"agentBoolean"
      }, {
        id: 4,
        name:"operatorBoolean"
      }
      ] //testing with data use: [{done:false,content:'testing'}]
  },
  methods: {
    check: function(e) {
    if(e.target.checked ){
    this.sum  = parseInt(this.sum)  + parseInt(e.target.value) ;
    }
    else{
    this.sum  = parseInt(this.sum)  - parseInt(e.target.value) ;
    }
    }
  }
})
body {
  font-family: Helvetica Neue, Arial, sans-serif;
}

li.done {
  text-decoration: line-through;
}

[v-cloak] {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" >
 <h3>SUM {{sum}}</h3>
  <ul>
    <li v-for="mainCat in mainCategories">
      <input type="checkbox" :value="mainCat.id" id="mainCat.id" @change="check($event)"> {{mainCat.name}}

    </li>
  </ul>
</div>

Upvotes: 1

Mishel Tanvir Habib
Mishel Tanvir Habib

Reputation: 1142

from MDN, The return statement ends function execution and specifies a value to be returned to the function caller. For example, 

........(some other code here)
var a = returnSomething();

function returnSomething() {
  if(b) { return 1; } //if b is true, next 2 lines will never execute and variable a will be assigned number 1
  if(c) { return 2; } //if a is true, next line will never execute and variable a will be assigned number 2
  console.log("this line will only print if both b and c are false.");
}

If there is no return statement, by default undefined is returned. When a return statement is used in a function body, the execution of the function is stopped. So, sometimes we use just return; to stop rest of the function from executing.

Now about your calculateNumber function, you are returning sum + 1 and others but you are not adding anything to the variable sum. So no matter what, value of sum is always 0. Instead of returning you have to add sum = sum + 1 (or 2/ or 4 etc). So your function should be like this:

calculateNumber() {
  let sum = 0;
  if (this.ruleForm.ownerBoolean === true) { sum += 1 }
  if (this.ruleForm.agentBoolean === true) { sum += 2 }
  if (this.ruleForm.operatorBoolean === true) { sum += 4 }
  console.log(sum);
}

Hope that helps... :)

Edit: Just now noticed that you've used const when declaring sum. In this context this is purely wrong, because const is short for constant and you can't change the value of a constant. so either use let or var instead.

Upvotes: 1

MH2K9
MH2K9

Reputation: 12039

Before logging you returned. First calculate the value to sum variable and return at the end of the method.

calculateNumber() {
    let sum = 0
    if (this.ruleForm.ownerBoolean === true) sum++
    if (this.ruleForm.agentBoolean === true) sum += 2
    if (this.ruleForm.operatorBoolean === true) sum += 4 
    console.log(sum)

    return sum
}

Upvotes: 1

BenM
BenM

Reputation: 53198

I'm guessing you want to actually sum sum depending upon the booleans' values.

In which case, you need to remove your return, and instead increment sum as follows:

calculateNumber() {
  let sum = 0

  if( this.ruleForm.ownerBoolean === true   ) { sum+= 1; }
  if( this.ruleForm.agentBoolean === true   ) { sum+= 2; }
  if( this.ruleForm.operatorBoolean === true) { sum+= 4; }

  console.log(sum)
}

It might also be a good idea to add return sum after the console.log call so you can actually use the value later.

Upvotes: 1

Ghoul Ahmed
Ghoul Ahmed

Reputation: 4806

try this:

calculateNumber() {
      let sum = 0
      if (this.ruleForm.ownerBoolean === true) { sum += 1 }
      if (this.ruleForm.agentBoolean === true) { sum += 2 }
      if (this.ruleForm.operatorBoolean === true) { sum += 4 }
      console.log(sum)
      return sum
    }

Upvotes: 1

Related Questions