我目前正在学习HTML/CSS/JS(DOM)和克隆编码Instagram练习。我的问题是，当我写一些句子，并单击按钮，它必须添加一个饲料作为一个列表。但是，当我点击按钮时，按钮不能正常工作。当我点击按钮时，我试图控制台。日志一些东西。我猜按钮坏了。你能帮我检查一下我的代码哪部分有问题吗?非常感谢你的帮助!：(我将在下面分享我的代码。(我增加了<脚本....>在HTML文件的底部!
这是我的HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Westagram Main Page</title>
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<!-- header : segmantic tag -->
<div class="wrapper">
<div class="nav">
<p class="logo"> Westagram </p>
<input class="search-box" type="text" placeholder=" Search", style="font-family:Arial, FontAwesome">
<div class="icons">
<img id="compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png" >
<img id="heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" >
<img id="my-page" src=" https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png">
</div>
</div>
<div class="main">
<div class="feeds">
<div class="article">
<div class="identi">
<img class="selfi" src="about.png">
<span class="name"> Jiwan Jeon </span>
<!-- 이름 두줄로 나오는거 해결할 -->
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</div>
<div class="pic">
<img src="ucscPic.png">
</div>
<div class="show-box">
<div class="reaction-icons">
<i class="fa fa-comment-o"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-send-o"></i>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="like-counts">
<span>like 4,000</span>
<div>
<div class="check-comments">
<span>UC Santa Cruz will continue to offer most courses remotely or online for spring and summer 2021, providing in-person instruction for a small</span>
<a id="space" href="">expanding</a><br>
<a href="">Check the all comments</a>
<ul class="feed-comments">
<li>test</li>
</ul>
</div>
</div>
<div class="comment">
<i class="fa fa-smile-o"></i>
<input class="user-input" type="text" placeholder="Add Comment...">
<button id="post">Post</button>
</div>
</div>
</div>
<div class="main-right">
<div class="top">
<img class="selfi" src="about.png">
<div class="main-right-name">
<span id="eng-name">JiwanJeon94</span><br>
<span id="kr-name">전지완</span>
</div>
<a href="">Transform</a>
</div>
<div class="middle">
<div class="middle-words">
<span id="recommendation">Suggestions For You</span>
<a href="" id="view-all">view all</a>
</div>
<div class="recommendation-people">
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="about.png">
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="about.png">
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="about.png">
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="about.png">
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="about.png">
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
</div>
</div>
<div class="footer">
<div class="footer-top">
<a href="">About</a>
<a href="">Help</a>
<a href="">press</a>
<a href="">API</a>
<a href="">Jobs</a>
<a href="">Privacy</a>
<a href="">Terms</a>
<a href="">Locations</a>
<a href="">TopAccounts</a>
<a href="">Hashtags</a>
<a href="">Language</a><br><br>
</div>
<span>2021 INSTAGRAM FROM FACEBOOK</span>
<script src="main.js"></script>
</body>
</html>
这是我的JS代码
let input = document.querySelector(".user-input");
let ul = document.querySelector(".feed-comments");
let postButton = document.querySelector("#post")
function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = ""; //after clikcing enter, clear the space
}
function addListAfterClick() {
console.log("click is working");
// console.log(input.value);
if (inputLength() > 0){
console.log("test")
createListElement();
}
}
function addListAfterKeypress(event){
// console.log(event);
if (inputLength() > 0 && event.keycode === 13){
createListElement();
}
}
postButton.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
刚刚测试了你的代码，它是工作的!当我点击发布按钮时，它将项目添加到列表中，并在控制台中打印click is working和test。
我猜是由于某种原因你的main.js文件未加载。确保你的HTML和main.js文件位于同一个文件夹。
你可以通过打开你的浏览器devTools (F12)并检查Network选项卡来检查main.js是否被加载。