Create a tally system with JavaScript

2018-04-14 15:49 Bradley imported from Stackoverflow

I would like to create a simple tally system to record the data-id from the elements that are selected and combine the data-id values at the end to generate a result.

function myAnswer() {
  document.getElementById('btnNxt').removeAttribute('disabled');
  var myResult = '';
  var iId = this.getAttribute('data-id');
  myObj[page].mySel = iId;
  myQueRep[page] = iId;
  console.log(iId);
  for (var x = 0; x < btn.length; x++) {
    if (iId == x) {
      btn[x].classList.add('selAnswer');
    } else {
      btn[x].classList.remove('selAnswer');
    }
 }

}

In this section, the iId variable gets the data-id value but I'm not sure how to tally the selections up and display a result based on that score.

JSFiddle of current code:

https://jsfiddle.net/mkykmg15/2/

1 answer

answered 2018-04-14 16:04 A. Lau

You should be doing something with your myQueRep.

So something like:

var myQueRep = ["1", "1", "1", "2", "2", "2"]

var tally = myQueRep.reduce( function (acc, curr) {
  return acc + +curr
}, 0);

console.log(tally)

this is my typescript file of registration form. what are changes i needed to done so that my form can be submitted and reset after that.

i am not using OnInit and any THIS function

export class MyErrorStateMatcher implements ErrorStateMatcher { isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { const isSubmitted = form && form.submitted; return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted)); } }

@Component({
  selector: 'app-new-registration',
  templateUrl: './new-registration.component.html',
  styleUrls: ['./new-registration.component.scss']
})
export class NewRegistrationComponent {

  users: User[] = [
    {name: 'Dealer'},
    {name: 'Carpenter'},
  ];
  selected = this.users[0].name;
  nameFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern('^[a-zA-Z\\s]*$')

  ]);

  mobileFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern(/^[6-9]\d{9}$/)
  ]);
  emailFormControl = new FormControl('', [
    Validators.email,
  ]);
  userControl = new FormControl('', [
    Validators.required
  ]);
  fatherFormControl = new FormControl('', [
    Validators.pattern(('^[a-zA-Z\\s]*$'))

  ]);
  accountControl = new FormControl('', [
    Validators.pattern('[0-9]{9,18}')

  ]);
  ifscControl = new FormControl('', [
    Validators.pattern('[0-9]{9,12}')

  ]);




  matcher = new MyErrorStateMatcher();
}

how to make particle.js move only one particular div?

Here is my full code.Actually I have some question.As u see in the output particles are move on the whole page,bt i want particles are move only on the red div.how can I do this? and secondly u see particles are started to move below to the navbar and paragraph but i actually want particles are started at the top of the page.how can i do this?. and also i unable to do heading and paragraph in the center of the red div. Can any one help me? Any help appreciable...Thanks in advance :)

body
{ 
margin:0;
padding:0;

}
div#particles-js
{ 
width:100%;
height:500px;
background:red;
position: fixed;
text-align:center;
}

h1 h2 p
{
	padding:  300px 300px;
	text-align:center;
}
#r{
	height:800px;
	background-color:yellow;
}
.navbar {
  height: 80px;
  background-color: transparent;
  border: none;
  color: white;
  z-index: 100;
  transition: background-color 1s ease 0s;
  font-size:15px;
}


.navbar-default .navbar-brand {
     margin-top: 10px;
     color: white;
   } 
    .navbar-default .navbar-brand   a:hover {
         color: #C57ED3;
         border: 1px solid #C57ED3;
      } 
   
.nav.navbar-nav.navbar-right li a {
    color: white;
	 margin-top: 10px;
}
  

    


  //Collapsed styles
  .navbar-toggle {
    border-color: #C57ED3;
  }
      &:hover, &:focus {
        background-color: #490D40;
      }



      .icon-bar {
        color: #C57ED3;
        background-color: #C57ED3;

      }
  

  .navbar-collapse.collapse.in ul {
    background-color: #490D40;
  }
    




/* Solid class attached on scroll past first section */

.navbar.solid {
  background-color: #490D40;
  transition: background-color 1s ease 0s;
  box-shadow: 0 0 4px grey;
}
    .navbar-brand {
      color: #C57ED3;
      transition: color 1s ease 0s;
    }

    .navbar-nav > li > a {
            color: #C57ED3;
            transition: color 1s ease 0s;
          }

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RESUME</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

        <!--jQuery library--> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <!--Latest compiled and minified JavaScript--> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="p.css">

</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Ayan Adhikary</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">About me</a></li>
            <li><a href="#">Education</a></li>
            <li><a href="#">Skills</a></li>
			<li><a href="#">Resume</a></li>
			<li><a href="#">Contact me</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
	
<div id="particles-js"><h1>hello</h1>
<h2>hello hello hello hello</h2>
<p> welcome to my webpage.....thanks</p></div>

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="particles.js"></script>
<script src="app.js"></script>
<div id="r">
</div>
<script>
$(document).ready(function() {
        // Transition effect for navbar 
        $(window).scroll(function() {
          // checks if window is scrolled more than 500px, adds/removes solid class
          if($(this).scrollTop() > 300) { 
              $('.navbar').addClass('solid');
          } else {
              $('.navbar').removeClass('solid');
          }
        });
});
</script>
		
</body>
</html>

Delete specific contents from a json object using another json object
What i wanna do is tricky to explain...

This is the general idea:
```
var object1 = [{"number":1111,"test":0,"low":2131},{"number":1234,"test":0,"low":2684},{"number":4214,"test":0,"low":6345}];

var object2 = [{"number":1234,"test":0,"low":2684}];

Some code here

output: var object1 = [{"number":1111,"test":0,"low":2131},{"number":4214,"test":0,"low":6345}];
```
I want to remove a item from object using another object as the reference for what i want removed. Keeping in mind, this is all dynamic so i may have 3 items in one object and 100 in the other object.

I need to check object 1 and see if it contains anything from object 2 and If it does then i wanna delete the object 2 items from object 1 then output the remaining items from object 1. Confusing...

Any help would be appreciated.

Related questions

Create a tally system with JavaScript

1 answer

See also questions close to this topic

this is my typescript file of registration form. what are changes i needed to done so that my form can be submitted and reset after that.