How to add plus 1 if the answer is correct in drag and drop API on JavaScript?

Question

I'm so new that I don't know how to make a scoring system in JavaScript. All I need is; if the drag1 is dropped on div1, 1 score must add up. Here's my index.php, css, and js files

 function submit() { document.getElementById('handler').style.display = 'block' const quest1 = document.getElementById('div1') const ans1 = document.getElementById('drag1') const totalScore = document.getElementById('score') const score = 0 totalScore.textContent = score; }

 <div id="drop_area"> <div id="div1 drop" ondrop="drop(event);" ondragover="allowDrop(event);" value="10000 Years"></div> <div id="div2 drop" ondrop="drop(event);" ondragover="allowDrop(event);" value="Evil Queen"></div> <div id="div3 drop" ondrop="drop(event);" ondragover="allowDrop(event);" value="12"></div> <div id="div4 drop" ondrop="drop(event);" ondragover="allowDrop(event);" value="Nana"></div> <div id="div5 drop" ondrop="drop(event);" ondragover="allowDrop(event);" value="Maurice"></div> </div> <div id="drag_options"> <div id="wrapper"> <div id="drag1 option" draggable="true" ondragstart="drag(event)">Evil Queen</div> <div id="drag2 option" draggable="true" ondragstart="drag(event)">Maurice</div> <div id="drag3 option" draggable="true" ondragstart="drag(event)">Nyla</div> <div id="drag4 option" draggable="true" ondragstart="drag(event)">Cruela Devil</div> <div id="drag5 option" draggable="true" ondragstart="drag(event)">4</div> <div id="drag6 option" draggable="true" ondragstart="drag(event)">Moris</div> <div id="drag7 option" draggable="true" ondragstart="drag(event)">10000 Years</div> <div id="drag8 option" draggable="true" ondragstart="drag(event)">1000 Years</div> <div id="drag9 option" draggable="true" ondragstart="drag(event)">12</div> <div id="drag10 option" draggable="true" ondragstart="drag(event)">Nana</div> </div> </div> <div id="submit_button"> <button type="submit" id="submit" onclick="submit()">Submit</button> </div>

Answer 1

To add 1 to the score if the answer is correct, you can use the following approach:

Declare a variable score outside the submit function and initialize it to 0. This will allow you to keep track of the score across multiple calls to the submit function.

Inside the submit function, retrieve the value of the div1 element using the value property.

Retrieve the value of the drag1 element in the same way.

Compare the values of div1 and drag1. If they are equal, increment the score by 1.

Update the text content of the totalScore element to reflect the updated score.

Here's what the modified submit function would look like:

let score = 0;

function submit() {
  document.getElementById('handler').style.display = 'block';

  const quest1 = document.getElementById('div1');
  const ans1 = document.getElementById('drag1');
  const totalScore = document.getElementById('score');

  if (quest1.value === ans1.value) {
    score += 1;
  }

  totalScore.textContent = score;
}

I hope this helps. Let me know if you have any questions.