我正在自学关于表单事件的知识,并让代码正常工作。但是,我想将显示逻辑分解为它自己的功能。然后,在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>
2条答案
按热度按时间piah890a1#
您可以创建一个新函数
showMovie
并通过newMovie
对象并显示电影详细信息vnjpjtjt2#
您的标题将无法正常工作,因为
<label for="movie">Title:</label>
. "“电影”并不存在。下面的输入名为title,请尝试将“movie”更改为“title”。