Добавить функцию запуска и сброса на кнопку - PullRequest
Новая
       9

Добавить функцию запуска и сброса на кнопку

2 голосов
/ 02 февраля 2020

Я новичок в программировании и пытаюсь самостоятельно выполнять упражнения. Я сделал своеобразное упражнение, где вы можете рисовать с помощью функции мыши. Проблема в том, что я хотел бы, чтобы на моей странице было две кнопки,

  • , одна из которых будет кнопкой пуска, где будет выполняться моя функция, а не сразу, как я на своей странице.
  • Второй будет кнопка сброса, которая очистит страницу.

Я какое-то время занимался этим упражнением и все еще не мог его выполнить, и я был бы признателен за любую помощь. Большое спасибо.

Html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    section {

        width: 100vw;
        height: 100vh;

    }
    .buttons {

    }

    button:nth-child(1) {
        margin: 20px;
    }
        </style>
</head>
<body>
    <section>

    <div id="buttons">

        <button id="start">Start</button>
        <button id="reset">Clear</button>
    </div>

   </section>

    <script src="index.js"></script>
</body>
</html>

JS: 

const section = document.querySelector("section");
const startClick = document.getElementById("start");
const resetClick = document.getElementById("reset");





section.addEventListener("mousemove", e => {
  const circle = document.createElement("div");
  section.appendChild(circle);
  circle.style.height = "20px";
  circle.style.width = "20px";
  circle.style.borderRadius = "50%";
  circle.style.position = "absolute";
  circle.style.left = e.clientX + "px";
  circle.style.top = e.clientY + "px";
  circle.style.backgroundColor = "red";
}); 



resetClick.addEventListener("click", e => {
  e = section;
  section.removeEventListener();
})

1 Ответ

1 голос
/ 02 февраля 2020
  1. removeEventListener нужен два аргумента для выполнения функции, пожалуйста, прочитайте документ или покажите консоль.
  2. А также, вы удалили идентификатор кнопки, который не совпадал.

Обновлено 

const section = document.querySelector("section");
const startClick = document.getElementById("start");
const resetClick = document.getElementById("reset");

function appender(e) {
  const circle = document.createElement("div");
  circle.className='appender';
  section.appendChild(circle);
  circle.style.height = "20px";
  circle.style.width = "20px";
  circle.style.borderRadius = "50%";
  circle.style.position = "absolute";
  circle.style.left = e.clientX + "px";
  circle.style.top = e.clientY + "px";
  circle.style.backgroundColor = "red";

}

startClick.addEventListener("click", e => {
  section.addEventListener("mousemove", appender);
})

section.addEventListener("mousemove", appender);

resetClick.addEventListener("click", e => {
  section.removeEventListener('mousemove', appender);
  document.querySelectorAll('.appender').forEach(a=> a.remove())
})
<section>

  <div id="buttons">

    <button id="start">Start</button>
    <button id="reset">Clear</button>
  </div>

</section>
...