这是我的html，它基本上只是一个有两个输入和h2的表单，我在输入和提交中写的任何内容都将显示在h2下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Basics</title>
</head>
<body>
<form id="tweeting" action="/idk">
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="username" />
<label for="comment">Comment</label>
<input style="padding-bottom: 30px" type="text" name="comment" id="comment" placeholder="Whats happening?" />
<button>Tweet Out</button>
</form>
<h2>TimeLine</h2>
<ul id="tweets"></ul>
<script src="app.js "></script>
</body>
</html>这是我的javascript，它应该接受输入并加粗，并将所有内容附加到一个列表中，该列表类似于临时时间线，在我刷新后将消失，但这不是问题所在：
//selecting the form
const tweeting = document.querySelector('#tweeting');
// selecting the ul which will be as a timeline
const timeLine = document.querySelector('#tweets');
# this function will just capture the inputs from the form after submitting it, we will save to a variable and call the function that will add our tweet to the ul (timeline)
tweeting.addEventListener('submit', function(e) {
e.preventDefault();
// saving the username
const usernameInput = tweeting.elements.username;
//saving the tweet
const tweetInput = tweeting.elements.comment;
//calling the function
addTweet(usernameInput.input, tweetInput.input)
usernameInput.value = '';
tweetInput.value = '';
})
const addTweet = (username, tweet) => {
// creating a new item that will be added to the timeline at the end
const newTweet = document.createElement("li");
//we wanted to make the username in bold so the next two lines is to do that
const bTag = document.createElement('b');
bTag.append(username);
// appended the username in bold
newTweet.append(bTag);
// appended the tweet
newTweet.append(`- ${tweet}`);
// added to the timeline
timeLine.append(newTweet);
}我不知道为什么它显示我未定义-未定义
1条答案
按热度按时间r8uurelv1#
您需要在调用addtweet时使用usernameinput.value而不是input。
完整代码如下所示。