如何在不中断的情况下将显示逻辑放入另一个函数(并访问对象属性)？

jvidinwx 于 2021-09-23 发布在 Java

关注(0)|答案(2)|浏览(267)

我正在自学关于表单事件的知识，并让代码正常工作。但是，我想将显示逻辑分解为它自己的功能。然后，在addmovie函数中调用新的显示函数。我已经尝试过了，代码要么说title未定义，要么说其他错误。如果我将显示逻辑移出addmovie函数，代码就会中断，因为显示函数试图访问addmovie函数中对象集的属性。如何在不中断的情况下将显示逻辑放入另一个函数（并访问对象属性）？这里是代码笔

let movies = [];

const movieForm = document.querySelector('#movieForm');

movieForm.addEventListener('submit', function(evt) {
  evt.preventDefault();
  // Grab user input
  const titleInput = movieForm.elements.title;
  const yrInput = movieForm.elements.year;
  // Add movie
  addMovie(titleInput, yrInput);
  // Reset form
  titleInput.value = '';
  yrInput.value = '';
});

const addMovie = (titleInput, yrInput) => {
  let newMovie = {
    id: Date.now(),
    title: titleInput.value,
    year: yrInput.value,
  };
  const {
    id,
    title,
    year
  } = newMovie;
  movies.push(newMovie);
  const displayMovie = document.createElement('li');
  displayMovie.append(`${title}, ${year}`);
  movieForm.append(displayMovie);
};

body {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.movieForm {
  width: 600px;
  height: auto;
  display: flex;
  margin: 1em;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

form {
  width: auto;
  margin: 0;
}

li {
  margin-top: 2em;
}

<div class="movieForm">
  <form action="" id="movieForm">
    <label for="movie">Title:</label>
    <input type="text" name="title">
    <label for="year">Year: </label>
    <input type="text" name="year">
    <button id="btn">submit</button>
  </form>
</div>

JavaScript

来源：https://stackoverflow.com/questions/68323500/how-do-i-put-the-display-logic-into-another-function-and-access-object-properti

2条答案

按热度按时间

piah890a1#

您可以创建一个新函数 showMovie 并通过 newMovie 对象并显示电影详细信息

function showMovie({ title, year }) {
  const displayMovie = document.createElement('li');
  displayMovie.append(`${title}, ${year}`);
  movieForm.append(displayMovie);
}

// Call inside addMovie function
showMovie(newMovie);

const movieForm = document.querySelector('#movieForm');

const movies = [];

function showMovie({ title, year }) {
  const displayMovie = document.createElement('li');
  displayMovie.append(`${title}, ${year}`);
  movieForm.append(displayMovie);
}

const addMovie = (titleInput, yrInput) => {
  let newMovie = {
    id: Date.now(),
    title: titleInput.value,
    year: yrInput.value,
  };
  movies.push(newMovie);

  // New Function
  showMovie(newMovie);
};

movieForm.addEventListener('submit', function(evt) {
  evt.preventDefault();
  // Grab user input
  const titleInput = movieForm.elements.title;
  const yrInput = movieForm.elements.year;
  // Add movie
  addMovie(titleInput, yrInput);
  // Reset form
  titleInput.value = '';
  yrInput.value = '';
});

body {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.movieForm {
  width: 600px;
  height: auto;
  display: flex;
  margin: 1em;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

form {
  width: auto;
  margin: 0;
}

li {
  margin-top: 2em;
}

<div class="movieForm">
  <form action="" id="movieForm">
    <label for="movie">Title:</label>
    <input type="text" name="title">
    <label for="year">Year: </label>
    <input type="text" name="year">
    <button id="btn">submit</button>
  </form>
</div>

赞(0）回复(0）举报 2021-09-23

vnjpjtjt2#

您的标题将无法正常工作，因为 <label for="movie">Title:</label> . "“电影”并不存在。下面的输入名为title，请尝试将“movie”更改为“title”。

赞(0）回复(0）举报 2021-09-23