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

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

  •  0
  • StephenW  · 技术社区  · 4 年前

    Codepen here

    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 年前
        1
  •  1
  •   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>
        2
  •  0
  •   JP Banas    4 年前

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