ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して Web Q&A コミュニティを開発する
JavaScript を使用して Web Q&A コミュニティを開発する
- WBOYオリジナル
- 2023-08-09 09:25:50854ブラウズ
JavaScript を使用した Web Q&A コミュニティの開発
インターネットの急速な発展に伴い、Web アプリケーションは人々が情報を取得しコミュニケーションを図るための重要な方法の 1 つになりました。 。 Web Q&A コミュニティは、その利便性とスピードにより、ユーザーにとって重要なコミュニケーション プラットフォームとなっています。この記事では、JavaScript を使用して簡単な Web Q&A コミュニティを開発する方法を紹介します。
1. 準備
2. インターフェイスの設計
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页问答社区</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>网页问答社区</h1>
<ul id="question-list"></ul>
<form id="ask-form">
<input type="text" id="question-input" placeholder="输入问题">
<button type="submit">提交</button>
</form>
<script src="script.js"></script>
</body>
</html>body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
ul {
list-style: none;
padding: 0;
}
li {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
form {
text-align: center;
margin-top: 20px;
}
input[type="text"] {
padding: 5px;
}3. 機能の実装次に、JavaScript を使用して Web Q&A コミュニティの機能を実装します。 JavaScript の DOM 操作を使用して、新しい質問と回答を動的に作成します。
// 问题列表
var questionList = document.getElementById("question-list");
// 提问表单
var askForm = document.getElementById("ask-form");
var questionInput = document.getElementById("question-input");
askForm.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单提交时的默认行为
var question = questionInput.value;
if (question) {
addQuestion(question);
questionInput.value = "";
}
});
// 添加问题的函数
function addQuestion(question) {
var li = document.createElement("li");
li.textContent = question;
questionList.appendChild(li);
}上記のコードでは、まず質問リストと質問フォームの DOM 要素を取得します。次に、フォーム送信イベントのリスナーを質問フォームに追加しました。フォームが送信されるとき、デフォルトの動作を防止し、質問からユーザー入力を取得します。次に、addQuestion 関数を呼び出して、新しい質問を質問リストに追加します。
4. コードを実行します。上記のコードを完了したら、HTML ファイルに index.html、CSS ファイルに style.css という名前を付けます。 JavaScript ファイル (script.js
Web サーバーを起動した後、ブラウザ経由で http://localhost:8080
概要
以上がJavaScript を使用して Web Q&A コミュニティを開発するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。