Question 270616 in Html Question posted in
Some basic documentation can be found here.

Html – Summation of Output

I have written this code for calculating the marks in an exam which, of course, includes buttons!!

function wrong_answer() {
  var calc = 0;
  var calc2 = 1;
  var div_ele = document.createElement("div");
  div_ele.innerHTML = calc - calc2;
  document.getElementById("div1").appendChild(div_ele);
}
function correct_answer() {
  var calc = 0;
  var calc2 = -3;
  var div_ele = document.createElement("div");
  div_ele.innerHTML = calc - calc2;
  document.getElementById("div2").appendChild(div_ele);
}
 .div_wrong {
     font-size: larger;
     font-family: "Agency FB";
     color: red;
     font-weight: 700;
 }

 .div_correct {
     font-size: larger;
     font-family: "Agency FB";
     color: blue;
     font-weight: 700;
 }
<input id="box" type="hidden" />
<button onclick="wrong_answer()" id="button1">WRONG ANSWER!</button>
<button onclick="correct_answer()">CORRECT ANSWER!</button>
<div id="div1" class="div_wrong"></div>
<div id="div2" class="div_correct"></div>

I want to perform a sum total of the list of numbers thus created by this program. What can I add to my program?

Tags:

3

Answers


  1. 0

    You were declaring calc unneccesarily.

    let sum = 0;

function wrong_answer() {
  var div_ele = document.createElement("div");
  div_ele.innerHTML = -1;
  sum = sum - 1;
  document.getElementById("sum").innerHTML = sum;
  document.getElementById("div1").appendChild(div_ele);
}
function correct_answer() {
  var div_ele = document.createElement("div");
  div_ele.innerHTML = 3;
  sum = sum + 3;
  document.getElementById("sum").innerHTML = sum;
  document.getElementById("div2").appendChild(div_ele);
}
    .div_wrong {
     font-size: larger;
     font-family: "Agency FB";
     color: red;
     font-weight: 700;
 }

 .div_correct {
     font-size: larger;
     font-family: "Agency FB";
     color: blue;
     font-weight: 700;
 }
    <input id="box" type="hidden" />
<button onclick="wrong_answer()" id="button1">WRONG ANSWER!</button>
<button onclick="correct_answer()">CORRECT ANSWER!</button>
<div>Sum is: <span id="sum">0</div>
<div id="div1" class="div_wrong"></div>
<div id="div2" class="div_correct"></div>
    Login or Signup to reply.
  2. 0

    Add a totalSum to display the total sum. And to make the calculation a lot easier, change wrong_answer() to updateTotal(-1) and correct_answer() to updateTotal(3). Create the following script-section to calculate the totalSum:

    var totalSum = 0;

function updateTotal(change) {
  var div_ele = document.createElement("div");
  div_ele.textContent = change;
  //if (change > 0) {
  //    div_ele.className = "div_correct";
  //} else {
  //    div_ele.className = "div_wrong";
  //}

  div_ele.textContent = change;
  div_ele.classList.add((change > 0) ? 'div_correct' : 'div_wrong');

  totalSum += change;
  document.getElementById("div1").appendChild(div_ele);
  document.getElementById("totalSum").textContent = totalSum;
}
    .div_wrong {
  font-size: larger;
  font-family: "Agency FB";
  color: red;
  font-weight: 700;
}

.div_correct {
  font-size: larger;
  font-family: "Agency FB";
  color: blue;
  font-weight: 700;
}
    <button onclick="updateTotal(-1)" id="button1">WRONG ANSWER!</button>
<button onclick="updateTotal(3)">CORRECT ANSWER!</button>
<div id="totalSum" class="div_total"></div>
<div id="div1" class="div_wrong"></div>
<div id="div2" class="div_correct"></div>
    Login or Signup to reply.
  3. 0

    Your calculation is wrong. It would help if you used a global variable to track the scores. Beyond that, you added unnecessarily repetitive code.

    I would advise you to make use of data attributes. You can include the score within the data attributes instead of the JS code. This makes the code completely abstractive to which button is clicked.

    const BUTTONS = document.querySelectorAll('button');
const OUTPUT = document.querySelector('#sum');
let score = 0;

BUTTONS.forEach(button => {
  button.addEventListener('click', function(element) {
    // function to calculate scores
    calculateScore(parseInt(element.target.dataset.points));
    
    // function to calculate Counts
    updateCounts(element.target.dataset.value);
  })
});

function calculateScore(points) {
  score = score + points;
  OUTPUT.textContent = score;
}

function updateCounts(value) {
  let element = document.querySelector(`#${value}_answers`);
  element.textContent = parseInt(element.textContent) + 1;
}
    .div_wrong {
     font-size: larger;
     font-family: "Agency FB";
     color: red;
     font-weight: 700;
 }

 .div_correct {
     font-size: larger;
     font-family: "Agency FB";
     color: blue;
     font-weight: 700;
 }
    <input id="box" type="hidden" />
<button data-points="-1" data-value="wrong">WRONG ANSWER!</button>
<button data-points="3" data-value="correct">CORRECT ANSWER!</button>
<div>
  <label for="sum">The sum is: </label>
  <output id="sum">0</output>
</div>

<output id="wrong_answers" class="div_wrong">0</output>
<output id="correct_answers" class="div_correct">0</output>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search