javascript - 数组返回未定义且无法循环[关闭](Array return undefined AND cannot be looped [closed])

Question

(Closed.)

((关闭。)

) This question is off-topic .

(这个问题是题外话 。)

It is not currently accepting answers.

(它当前不接受答案。)

---

(Want to improve this question?)

((想改善这个问题吗？)

) Update the question so it's on-topic for Stack Overflow.

(更新问题 ，使其成为Stack Overflow 的主题 。)

Closed 15 hours ago .

(15小时前关闭。)

I have a file name posts.js contains three objects.

(我有一个文件名posts.js包含三个对象。)

I also have a script.js file where i want to create a post base on the array.

(我也有一个script.js文件，我想在该文件的基础上创建一个帖子。)

I have a function createPostElement(posts) that will create all the HTML elements.

(我有一个函数createPostElement（posts），它将创建所有HTML元素。)

however, my for loop will return 'posts' is not defined and I, for example, console.log (posts.image_url) will return undefined too.

(但是，我的for循环将返回未定义的“帖子”，例如，console.log（posts.image_url）也将返回未定义。)

Why did this happen?

(为什么会这样呢？)

 const posts = [{ id: 1, username: "whoelsebutsam", message: "This is a cat! ??", image_url: "https://images.pexels.com/photos/1183434/pexels-photo-1183434.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260", like_count: 2, comments: [{ message: "I also like cats" }, { message: "Yeah, me too" } ] }, { id: 2, username: "whoelsebutsam", message: "This is a dog! ??", image_url: "https://images.pexels.com/photos/1629781/pexels-photo-1629781.jpeg?cs=srgb&dl=adorable-animal-animal-photography-1629781.jpg&fm=jpg", like_count: 2, comments: [{ message: "I also like dogs" }, { message: "Yeah, me too" } ] }, { id: 3, username: "whoelsebutsam", message: "I'm not really sure what this is.", image_url: "https://images.pexels.com/photos/209620/pexels-photo-209620.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", like_count: 0, comments: [] } ] function loadPosts(posts) { postsContainer.innerHTML = ""; for (i = 0; i < posts.length; i++) { const a = createPostElement(posts[i]) postsContainer.appendChild(a) } } function createPostElement(posts) { const main = document.createElement("div"), post = document.createElement("article"); post.classList.add("post"), main.appendChild(post); const header = document.createElement("header"); header.classList.add("post-header", "post-inset"), post.appendChild(header); const user = document.createElement("p"); user.classList.add("post-heading"), user.innerText = posts.username header.appendChild(user); const postLink = document.createElement("div"); postLink.classList.add("post__links"), header.appendChild(postLink); const icon = document.createElement("i"); icon.classList.add("material-icons", "favorite-icon", "button"), icon.innerText = "favorite" postLink.appendChild(icon) // a.addEventListener("click", () => { // likePost(e.id) // }); const icon1 = document.createElement("i"); icon1.classList.add("material-icons", "comment-icon", "button"), icon1.innerText = "comment" postLink.appendChild(icon1) const icon2 = document.createElement("i"); icon2.classList.add("material-icons", "share-icon", "button"), icon2.innerText = "share" postLink.appendChild(icon2) // m.addEventListener("click", () => { // sharePost(e.id) // }); const mainFig = document.createElement("figure"); mainFig.classList.add("post__figure"), post.appendChild(mainFig); const postImage = document.createElement("img"); postImage.classList.add("post__image"), postImage.setAttribute("src", posts.image_url), mainFig.appendChild(postImage); const postCaption = document.createElement("div"); postCaption.classList.add("post__caption", "post__inset"), postCaption.innerText = posts.message mainFig.appendChild(postCaption); const postComment = document.createElement("section"); postComment.classList.add("comments-container", "post__inset"), post.appendChild(postComment); const someComment = document.createElement("ul"); someComment.classList.add("comments"), postComment.appendChild(someComment); // for (const t of e.comments) { // const e = document.createElement("li"), // n = document.createElement("i"); // n.classList.add("material-icons", "comment-icon"), // n.innerText = "account_box", // e.appendChild(n), // e.innerText = t.message, // u.appendChild(e) // } const commentForm = document.createElement("form"); commentForm.classList.add('comment-form') post.appendChild(commentForm) const commentInput = document.createElement('input') commentInput.classList.add('comment-form__comment') commentInput.setAttribute('placeholder', 'Add a comment ...') commentForm.appendChild(commentInput) const postButton = document.createElement('button') postButton.innerText = 'Post' postButton.classList.add('comment-form__button') commentForm.appendChild(postButton) } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="page-layout"> <header class="page-header"> <div class="header-content content"> <h1 class="page-header__heading">Mclovin' Gram</h1> </div> </header> <main class="main-page"> <div id="posts-container" class="content posts-container"> <div> <article class="post"> <header class="post-header post-inset"> <p class="post-heading">Username</p> <div class="post__links"> <i class="material-icons favorite-icon button">favorite</i> <i class="material-icons comment-icon button">comment</i> <i class="material-icons share-icon button">share</i> </div> </header> <figure class="post__figure"> <img class="post__image" src="https://i.ytimg.com/vi/vocTWwjiq60/hqdefault.jpg" alt=""> <div class="post__caption post-inset">heelloo</div> </figure> <section class="comments-container post-inset"> <ul class="comments"> <li>hello</li> <li>ok</li> </ul> </section> <form class="comment-form" action=""> <input id="comment-message" class="comment-form__comment" type="text" name="comment" placeholder="Add a comment ..."> <button class="comment-form__button">Post</button> </form> </article> </div> </main> <footer class="page-footer"> <div class="footer-content content"> <form id="post-form" class="post-form"> <input id="post-form-username" class="post-form__input" type="text" name="name" placeholder="Username"> <input id="post-form-image_url" class="post-form__input" type="text" name="image-url" placeholder="Image URL"> <input id="post-form-comment" class="post-form__input" type="text" name="comment" placeholder="Comment"> <button class="post-form__button">Post</button> </form> </div> </footer> </div> 

  ask by NewHelloWorld626 translate from so

Answer 1

等待大神答复