функция не работает с кнопкой (myMove не определен в HTMLButtonElement.onclick)

Question

Это мой HTML:

<template>
  <div id="app">
    <div id="myContainer">
      <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
      </div>
      <router-view />
      <button onclick="myMove()">Test</button>
      <img id="picture" :src="randomImage" />
    </div>
  </div>
</template>

моя функция myMove () не работает при нажатии, и я не понимаю почему, должна быть анимация (картинка должна идти вниз), у вас есть какие-нибудь решения, ребята?

еще одна вещь, JavaScript:

function myMove() {
  const elem = document.getElementById("picture");
  let pos = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}

и еще одна вещь, я использую vue-cli Может быть, проблема в том, как это связано с тем или, например, я использую ESlint и все должно быть ES6, может быть, я не использовал некоторые необходимые условия? Жду вашего ответа, спасибо!

Answer 1

Вам необходимо изменить свойство position вашего элемента <img> на относительно или absolute .По умолчанию static , и ваше изображение будет на месте.

<img id="picture" :src="randomImage" style="position:relative" />