もう一度Javascriptで問題が発生しましたが、今回はもっと複雑なものです。
私は小さなJavascriptのテキストエディタを作ろうとしていますが、基本的には実験、テストなどが容易でなければならず、<h1>
html要素と<p>
html要素があり、 <input type="text" />
要素と<textarea></textarea>
に書き込みます。
今はすべてうまくいきますが、問題があります。行間に空白を入れるだけで、ユーザーはEnterキーを押すことはできませんが、もちろん<br />
htmlタグを使用する必要があります。
私の考えは、ユーザーがそのボタンを押してこのタグを追加できるようにする小さなボタンを作ることでした。
そしてJavascriptは実際のテキストの変数を作成し、それを保存し、末尾に<br />
を追加します。その結果は、ユーザーが書き込んだテキストとbreak htmlタグの両方になります。
これは、テキストエリアが空で、何かを書いたことがない場合は10〜20回でも動作しますが、何かを書くとすべてのテキストを削除しても機能しなくなります。
私は下のコードで何が問題であるかを理解できます。助けてください。Javascriptでテキストエリアにテキストを追加
<html>
\t <head>
\t \t <title>Text editor</title>
\t \t <meta charset="utf-8" />
\t \t <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
\t \t <style>
\t \t \t .title {
\t \t \t \t font-family: roboto;
\t \t \t \t text-align: center;
\t \t \t }
\t \t \t .text {
\t \t \t \t font-family: roboto slab;
\t \t \t \t text-align: justify;
\t \t \t \t margin-bottom: 40px;
\t \t \t }
\t \t \t .container {
\t \t \t \t width: 80%;
\t \t \t }
\t \t \t .textarea {
\t \t \t \t width: 100%;
\t \t \t \t height: 30em;
\t \t \t \t text-indent: 0.5em;
\t \t \t }
\t \t \t .title_box {
\t \t \t \t margin: 10px;
\t \t \t \t width: 20em;
\t \t \t \t padding: 10px;
\t \t \t \t font-size: 1em;
\t \t \t }
\t \t </style>
\t </head>
\t <body>
\t \t <center>
\t \t <div class="container">
\t \t \t <h1 class="title" id="title_space">Title of the page</h1>
\t \t \t <p class="text" id="text_space">Content of the page.</p>
\t \t </div>
\t \t </center>
\t \t <hr />
\t \t <center><input type="text" class="title_box" placeholder="Title" id="title_box" /></center>
\t \t <textarea class="textarea" id="text_box"></textarea>
\t \t <input type="submit" value="Save" onclick="saveText()" />
\t \t <input type="submit" value="br" onclick="br()" />
\t \t
\t \t <script>
\t \t \t function saveText(){
\t \t \t \t var title = document.getElementById("title_box").value;
\t \t \t \t var text = document.getElementById("text_box").value;
\t \t \t \t
\t \t \t \t document.getElementById("title_space").innerHTML = title;
\t \t \t \t document.getElementById("text_space").innerHTML = text;
\t \t \t \t
\t \t \t }
\t \t \t function br(){
\t \t \t \t var actualtext = document.getElementById("text_box").value;
\t \t \t \t var processedtext = actualtext + "<br />";
\t \t \t \t document.getElementById("text_box").innerHTML = processedtext;
\t \t \t }
\t \t </script>
\t \t
\t </body>
</html>
あなたの時間のための感謝、そして私の恐ろしい英語のため申し訳ありません。
そして今、働いています、ありがとうございます。 –