代码之家 › 专栏 › 技术社区 › StephenW

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

javascript

StephenW · 技术社区 · 4 年前

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>

2 回复 | 直到 4 年前

DecPK 4 年前

您可以创建一个新函数 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>

JP Banas 4 年前

<label for="movie">Title:</label> . "电影“不存在。下面的输入名为title,所以尝试将“movie”改为“title”。