how to find the greatest value in js?

Question

I am making a quiz and I want to find out which button has the most clicks so I can give the answer

I have these variables in the start set to zero and their scores will increase by user input

var earthScore = 0;
var venusScore = 0;

whenever the button is clicked a fuction runs

q1a4.addEventListener ("click", earth);
q1a5.addEventListener ("click", venus);

this function will add one to the original variables

function earth () {
    earthScore += 1;
    questionCount += 1;
}
function venus () {
    venusScore += 1;
    questionCount += 1;
}

now I want to find out the variable which has the most clicks and give an answer to user so for example; if earth variable has greater score than venus variable then I will change the result to result.innerHTML = 'you are earth' but I don't know how to find the variable with the greatest score

this is actually my first project using js so i dont have that much idea and everything i tried to find seems wrong so i would really appreciate if anyone can give me an answer for my program.

Answer 1

You might put the Results into an Array afterwards with:

let tmpArray = [];
tmpArray.push(earth);
tmpArray.push(venus);
tmpArray.sort(function(a, b){return b - a});

Now, you have the highest value in:

tmpArray[0];

Refer to: https://www.w3schools.com/js/js_array_sort.asp

Answer 2

Take a look at the solution first:

var earthScore = 0;
var venusScore = 0;
var questionCount = 0;

function handleResult() {
    if (earthScore !== venusScore) result.innerText = "you are " + ((earthScore >= venusScore) ? "earth" : "venus");
    else result.innerText = "";
}

function earth () { earthScore += 1; questionCount += 1; handleResult(); }
function venus () { venusScore += 1; questionCount += 1; handleResult(); }

let q1a4 = document.getElementById("q1a4");
let q1a5 = document.getElementById("q1a5");

q1a4.addEventListener ("click", earth); q1a5.addEventListener ("click", venus);

let result = document.getElementById("result");

<input type="button" id="q1a4" value="EARTH">
<input type="button" id="q1a5" value="VENUS">
<div id="result"></div>

Explanation:

• we initialize the scores with 0
• we define handleResult which will update the result with the current winner (or nothing when we have a tie)
• we have earth and venus like you initially defined, except for calling handleResult as well to handle the result
• we get the buttons
• we specify click events for the buttons like you specified
• we get the result element as well so we can display the result

EDIT

Let's see an example with 8 items, which, by chance corresponds with the number of planets in the solar system (poor Pluto)

function handleResult() {
    let tie = false;
    let maxSoFar = 0;
    let plnt = "";
    for (let planet of Object.keys(counts)) {
        if (counts[planet] > maxSoFar) {
            maxSoFar = counts[planet];
            tie = false;
            plnt = planet;
        } else if (counts[planet] === maxSoFar) {
            tie = true;
        }
    }
    if (tie) {
        result.innerText = ""; //a tie
    } else {
        result.innerText = "You are " + plnt.toLowerCase();
    }
}

let result = document.getElementById("result");
let planets = document.getElementsByClassName("planet");
let counts = {};
for (let planet of planets) {
    counts[planet.value] = 0;
    planet.addEventListener("click", function() {
        counts[this.value]++;
        handleResult();
    });
}

<input type="button" class="planet" value="MERCURY">
<input type="button" class="planet" value="VENUS">
<input type="button" class="planet" value="EARTH">
<input type="button" class="planet" value="MARS">
<input type="button" class="planet" value="JUPITER">
<input type="button" class="planet" value="SATURN">
<input type="button" class="planet" value="URANUS">
<input type="button" class="planet" value="NEPTUNUS">
<div id="result"></div>

Explanation:

• handleResult now extracts the keys of the object of counts (which are planet names), iterates them and compares their count to the maximum so far; if it's greater, then it's surely not a tie and it's the new maximum and these values are stored; otherwise, if the count of the current planet is equalling the highest count so far, then we have a tie (so far); finally, if the current count is smaller than the maximum so far, then we do nothing and let the loop to step over the item
• we get the result item exactly like we did so earlier
• we get the planets by class name, because it would be awkward to get them separately by id, writing 8 lines instead of a single one
• we initialize counts as an empty object
• and iterates the planets
• initializing the count of each planet as a data member of counts having a value of 0, for example, counts["MERCURY"] is 0 at the start
• we create an event for each planet which will occur when the planet's button is being clicked, incrementing the count of the planet in question and calling handleResult