Блог

Я определенно новичок в Javascript.Моя цель состоит в том, чтобы создать два дива и оживить ребенка просто с помощью Javascript.Но в моей функции есть какая-то проблема, и, несмотря на то, что это тривиальная задача, я ничего не смог найти.

Итак, это мои кнопки и мои дивы(я просто пытаюсь понять, как работает кнопка «Пуск», а затем я собираюсь разобраться с остальными

 //create elements
const start = document.createElement('button');
const reset = document.createElement('button');
const stop = document.createElement('button');



const parent = document.createElement("div");
const child= document.createElement("div");
document.body.append(parent);
parent.append(child);
document.body.append(start);
document.body.append(reset);
document.body.append(stop);

// style 
parent.style.width = "200px";
parent.style.height = "200px";

child.style.width = "20px";
child.style.height = "20px";


child.style.background = "green"
parent.style.background  = "red";

start.innerHTML = "start";
reset.innerHTML = "reset";
stop.innerHTML = "stop";
 

и это моя бесполезная функция, которая выглядит неправильно

 /functions and listeners
var g =setInterval(move(),2000);
function move(){
    var pos = 0;
    if (pos == 200) {
        clearInterval(g);
    }
    else {
        pos  ;
        child.style.top = pos   "px";
        child.style.left = pos   "px";
    }
}
start.addEventListener("click",move());
 

любой совет или совет приветствуется =)

У вас есть несколько проблем:

• pos Переменная должна быть объявлена вне функции, которая ее использует, чтобы ее значение не было потеряно при выполнении функции, а затем могло использоваться при выполнении функции дополнительное время.
• Обработчик событий нажатия кнопки «Пуск» должен находиться там, где запускается интервальный таймер, в противном случае он запускается немедленно.
• Оба setInterval() и .addEventListener() принимают ссылки на функции — вы не вызываете функцию в их аргументах (если только эта функция не возвращает функцию, и эта возвращенная функция — это то, на что вы хотите ссылаться). Таким образом, ни то, ни другое не должно быть () после имени функции.
• Ваши родительские и дочерние элементы должны быть расположены так, чтобы они не находились в обычном потоке документов, иначе установка top left свойства или CSS ничего не даст.
• Не используйте .innerHTML , когда вы не работаете со строками HTML, так как .innerHTML это влияет на безопасность и производительность. Когда у вас есть только текст для работы, используйте .textContent .

Смотрите другие комментарии в строке:

 //create elements
const start = document.createElement('button');
const reset = document.createElement('button');
const stop = document.createElement('button');

const parent = document.createElement("div");
const child= document.createElement("div");
document.body.append(parent);
parent.append(child);
document.body.append(start);
document.body.append(reset);
document.body.append(stop);

/* Use CSS classes instead of inline styles */
parent.classList.add("parent");
child.classList.add("child");

start.textContent = "start";
reset.textContent = "reset";
stop.textContent = "stop";

//functions and listeners
var timer = null;
var pos = 0;
function move(){
  // Since it's the top and left of the child that are being set, we
  // need to subtract the width of the box from the size of the parent
  // so that the child doesn't end with its top and left outside of the
  // parent.
  if (pos == 180) {
    clearInterval(timer);
  } else {
    pos  ;
    child.style.top = pos   "px";
    child.style.left = pos   "px";
  }
}
start.addEventListener("click", function() {
  // The timer should start when the button is clicked
  timer = setInterval(move,20);
});

reset.addEventListener("click", function() {    
  clearInterval(timer); // Stop the timer so motion stops
  pos = 0;     
  child.style.top = pos  "px";     
  child.style.left = pos   "px";      
}); 

 /* The child needs to be taken out of the normal document flow so it can be
   explicitly positioned, but we want it to be relative to the parent it is
   inside of, so the parent also has to be positioned explicitly.  */
.parent { position:relative; width: 200px; height:200px; background-color:red; }
.child { position:relative; width: 20px; height:20px; background-color:green; }