Блог

Главная - Вопросы по программированию - Как остановить Math.random activity при использовании с onmousemove?

Как остановить Math.random activity при использовании с onmousemove?

#javascript #html

#javascript #HTML

Вопрос:

Я хочу, чтобы Math.random() действие прекратилось и больше не продолжалось, когда я нажал на кнопку. Как я могу это сделать с помощью этого кода?

 var result = document.getElementById('result'); 

  var x =document.getElementById('text');

  var btn = document.querySelector('#btn');


window.onmousemove =function() {
result.innerHTML = Math.random() ;
   }

btn.onclick = function () {
result.innerHTML = "stop" ;
 } 
 <div class="container text-center">
  <div id="text" class="alert alert-danger">JS EGITIMI</div>

<button type="button" id="btn" class="btn btn-dark">CLICK</button>
   </div>  
    <p id="result" style="margin-top: 100px;margin-bottom: 100px;"></p>

Комментарии:

1. Удалите событие: window.onmousemove = null; .

2. Создайте логическое значение и установите для него значение false при нажатии кнопки. В событии mousemove проверьте, установлено ли для этого значения значение true, прежде чем назначать innerHTML

Ответ №1:

Вы могли бы просто добавить логическое значение, которое проверяет, можете ли вы изменить значение или нет.

Таким образом, вы можете включать и выключать его, переключая логическое значение между true и false ;

 var result = document.getElementById('result'); 

var x = document.getElementById('text');

var btn = document.querySelector('#btn');

var canChange = true;

window.onmousemove =function() {
  if(canChange) {
    result.innerHTML = Math.random() ;
  }
}

btn.onclick = function () {
  canChange = false;
  result.innerHTML = "stop";
} 
 <div class="container text-center">
  <div id="text" class="alert alert-danger">JS EGITIMI</div>

  <button type="button" id="btn" class="btn btn-dark">CLICK</button>
</div>

<p id="result" style="margin-top: 100px;margin-bottom: 100px;"></p>

Комментарии:

1. Я получил ответ, но не понял, почему вы использовали canChange для определения true? Я уверен, что это простой вопрос, но здесь он новый :

2. @Nsur это просто имя, которое я выбрал для логического значения. Префикс like is has или can kinda определяет, что он может содержать только 2 состояния, это либо true (может), либо false (не может). Вы можете выбрать любое имя, которое хотите, но такие соглашения об именовании просто помогают для удобства чтения кода.

Ответ №2:

Вот и все;

 var result = document.getElementById('result'); 

  var x =document.getElementById('text');

  var btn = document.querySelector('#btn');


window.onmousemove =function() {
result.innerHTML = Math.random() ;
   }

btn.onclick = function () {
result.innerHTML = "stop" ;
if(window.onmousemove !== null) {
window.onmousemove = null;
}else {
    window.onmousemove =function() {
        result.innerHTML = Math.random() ;
   }
}
 } 
 <div class="container text-center">
  <div id="text" class="alert alert-danger">JS EGITIMI</div>

<button type="button" id="btn" class="btn btn-dark">CLICK</button>
   </div>  
    <p id="result" style="margin-top: 100px;margin-bottom: 100px;"></p>

Комментарии:

1. Здесь я добавил всю функциональность к кнопке, то есть остановил и запустил math.random

Ответ №3:

простое событие сброса в окне при нажатии кнопки :

 btn.onclick = function() {
  result.innerHTML = "stop";
  window.onmousemove = null;
}

см. Фрагмент

 var result = document.getElementById('result');

var x = document.getElementById('text');

var btn = document.querySelector('#btn');


window.onmousemove = function() {
  result.innerHTML = Math.random();
}

btn.onclick = function() {
  result.innerHTML = "stop";
  window.onmousemove = null;
} 
 <div class="container text-center">
  <div id="text" class="alert alert-danger">JS EGITIMI</div>

  <button type="button" id="btn" class="btn btn-dark">CLICK</button>
</div>
<p id="result" style="margin-top: 100px;margin-bottom: 100px;"></p>

Комментарии:

1. Хотя я должен признать, что я никогда не проверял, что браузеры делают с обработчиком no-op, лучше просто установите его null , чтобы убедиться, что он не будет срабатывать бесполезно. (Они вполне могут полностью избежать маршрута отправки-события, если нет зарегистрированного обработчика, только то, что здесь нет операции, может заставить их работать впустую)

2. @Nsur вы исправили свою проблему?