Related questions

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)

See also questions close to this topic

  • How to access a variable in an EJS file from a different JS file

    I am building a simple web app that takes in 3 different types of inputs and renders one of 3 different EJS file from a views directory (using Node and Express). Each of the rendered EJS files needs the contents of a static array. The static array is big and I want to store it in a separate JS file. I tried putting this code in the EJS files:

    <script src="arrayFile.js"></script> <%= array %>

    array is undefined. What am I doing wrong?

  • Hover works fine on chrome but on safari the div that shows up on hover is displayed next to the first div?

    So the hover works perfectly fine on chrome but when I look at it in safari the div that shows up on hover is displayed directly to the right of the div it should be on top of. Not sure why this isn't working properly in all browsers? Any help would be great!

    Here is the HTML: 

     <div class="appdesign">
 <img class="appmockup" src="img.jpg"/>
 <div class="apptext" style="display:none">
 <p class="apptexttitle">Name</p>
 <p class="apptextinfo">Mobile App Design<br><br>Insert info</p>
 <button>
 <a href="appdesign.html">View Project</a>
 </button>
 </div>
 </div>

    Here is the CSS

    .appdesign{
   display: inline-flex;
 img{
  height: 450px;
  width: 650px;
  margin-bottom: 30px;
  }
.appdesign img:hover .apptext{
  opacity: 0.5;  
 }
.apptext{
  display: block;
  opacity: 0.8;
  position: absolute;
  background-color: $customgrey;
  height: 450px;
  width: 650px;
  margin-bottom: 30px;
  z-index: 100;

.apptexttitle{
  color: $white;
  font-size: 30px;
  border-bottom: 2px solid $white;
  border-top: 2px solid $white;
  width: 15vw;
  padding: 10px;
  text-align: center;
 }
 }
.apptextinfo{
  width: 40vw;
  font-size: 18px;
  font-family: Merriweather;
 }
 }

    Here is the JS

    <script>
$('.appdesign').hover(function(){
$(this).find('.apptext').fadeIn('slow');
},
function(){
$(this).find('.apptext').stop().fadeOut('slow');
});
</script>
  • ReactJS: Target container is not a dom element (non-HTML)

    I am having problems with My ReactJS code, and it keeps telling me that the target container is not a DOM element, no matter how many times I rearrange the code. It does NOT involve HTML and I really don't know whats causing this error. Any help? What even is a target container?

    import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Home from "./components/Home";
import login from "./components/login"
import Header from "./components/Header";
//import PageAccount from './components/PageAccount';
import PageBlog from './components/PageBlog';
import PageBlogCreate from './components/PageBlogCreate';
import PageSearch from "./components/PageSearch";
//import PageLogin from './components/PageLogin';
import PageError from './components/PageError';
import {BrowserRouter} from "react-router-dom";
import {Switch} from "react-router-dom";
import {Route} from "react-router-dom";
import "./sass/index.css";
import App from "./App";
import ContextHandler from "./ContextHandler"



ReactDOM.render((
/*
<BrowserRouter>
    <div>
        <Switch>    
            <Route path="/" exact component={Home}/>

            { /*<Route path="/about" exact component={About}/>
            <Route path="/news" exact component={News}/>
            <Route path="/login" exact component={Login}/>
<Route path="/search" exact component={Search}/> }

            <Route path="/" exact component={Header}/>
           { /*<Route path="/account" exact component={PageAccount}/>
            <Route path="/blog" exact component={PageBlog}/>
<Route path="/blog/create" exact component={PageCreateBlog}/>}

            <Route path="/search" exact component={PageSearch}/>
            {/*<Route path="/login" exact component={PageLogin}/>
            <Route path="*" component={PageError}/>}

            <Route path="/search" exact component={PageSearch}/> 
            <Route path="/login" exact component={login}/>
        { <Route path="*" component={PageError}/> }

        </Switch>
        </div>
</BrowserRouter>    
        */

//),


   <ContextHandler>
    <App /> 
    </ContextHandler>

,
 ReactDOM.render(<App />, document.getElementById('root'))));

registerServiceWorker();