Как добавить плюс 1, если ответ правильный в API перетаскивания на JavaScript?

Я настолько новичок, что не знаю, как сделать систему подсчета очков в JavaScript. Все что мне нужно это; если drag1 упал на div1, в сумме должен быть получен 1 балл. Вот мои файлы index.php, css и js

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>

От чего зависит оценка каждого правильно сопоставленного события перетаскивания?

dale landry 25.12.2022 08:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  1. НИКОГДА не вызывайте что-либо в форме id или name=submit. Также не вызывайте функцию submit.
  2. У вас нет формы, поэтому не нужно использовать кнопку отправки. Просто есть <button id = "run" type = "button">Run</button>.
  3. Используйте прослушиватели событий и делегирование

Вот полная версия для изучения Я взял перетаскивание из MDN

Я не добавил обработку ошибок, когда один и тот же ответ отбрасывается дважды.

Я угадал расчет точки

window.addEventListener("DOMContentLoaded", () => { // when page has loaded
  const target = document.getElementById("drop_area");
  const source = document.getElementById("drag_options");
  const resetBut = document.getElementById("reset");
  const runBut = document.getElementById("run");
  const answerDiv = document.getElementById("answers");
  let dragged = null;

  source.addEventListener("dragstart", (event) => {
    // store a ref. on the dragged elem
    dragged = event.target;
  });

  target.addEventListener("dragover", (event) => {
    // prevent default to allow drop
    event.preventDefault();
  });

  target.addEventListener("drop", (event) => {
    // prevent default action (open as link for some elements)
    event.preventDefault();
    // move dragged element to the selected drop target
    if (event.target.dataset.value) {
      // dragged.parentNode.removeChild(dragged);
      event.target.textContent = dragged.textContent;
    }
  });

  const pointsPerCorrect = 5;
  runBut.addEventListener("click", () => {
    const correct = [...target.querySelectorAll("div")].filter(div => div.textContent === div.dataset.value); // run filter on the child divs
    const numberOfCorrect = correct.length;
    const answers = correct.map(div => div.textContent).join(", ");
    answerDiv.innerHTML = `You had ${numberOfCorrect} answer${numberOfCorrect===1?"":"s"} correct.<br/> ${answers}`; // using template strings
  });
  resetBut.addEventListener("click", () => {
    target.querySelectorAll("div").forEach((div,i) => div.textContent = (i+1));
  });
});
#drop_area {
  background-color: green;
}

#drag_options {
  background-color: red;
}

#drop_area div {
  padding: 2px;
  border: 1px solid black;
}

#drag_options div {
  padding: 2px;
  border: 1px solid black;
}
<div id = "drop_area">
  <div data-value = "10000 Years">1</div>
  <div data-value = "Evil Queen">2</div>
  <div data-value = "12">3</div>
  <div data-value = "Nana">4</div>
  <div data-value = "Maurice">5</div>
</div>
<hr/>
<div id = "drag_options">
  <div draggable = "true">Evil Queen</div>
  <div draggable = "true">Maurice</div>
  <div draggable = "true">Nyla</div>
  <div draggable = "true">Cruella de Vil</div>
  <div draggable = "true">4</div>
  <div draggable = "true">Moris</div>
  <div draggable = "true">10000 Years</div>
  <div draggable = "true">1000 Years</div>
  <div draggable = "true">12</div>
  <div draggable = "true">Nana</div>
</div>

<div id = "submit_button">
  <button type = "button" id = "reset">Reset</button>
  <button type = "button" id = "run">Submit</button>
</div>
<div id = "handler">
  <div id = "score_board">
    <div id = "wrap">
      <h1>SCORE</h1>
      <div id = "answers"></div>
    </div>
  </div>
</div>

Я уже решил это, большое спасибо за то, что поделились своими знаниями!

acys 25.12.2022 13:36

Другие вопросы по теме