2017-06-11 9 views
0

もう一度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>

あなたの時間のための感謝、そして私の恐ろしい英語のため申し訳ありません。

答えて

0

テキストエリアを更新している、ではなく:

document.getElementById("text_box").innerHTML = processedtext; 

用途:

みました
document.getElementById("text_box").value = processedtext; 
+0

そして今、働いています、ありがとうございます。 –

0

てみだけで

text = text.replace(/\r?\n/g, '<br>');

改行があるテキストに変更する前に、あなたのjavascriptのコードにこれを追加するには、\ r \ nまたは\ n HTMLの改行が<br>であり、それが問題である間。

私はあなたの質問を正しく理解しました。

Here is the code running

+0

が、問題は
があるということではない問題 –

+0

を解決しません私が「保存」をクリックしたときに機能しないのは、テキスト領域に何かを書き込むと、ボタンが
と書かれていないことですそれは私がページをリフレッシュし、ボタンをクリックすると最初に何か、何が起こったのアイデアを書くか?ありがとう。実際の問題点を確認するためにコードスニペットを実行してみてください。 –

+0

このソリューションは、テキスト領域に何かを入力するときに機能し、新しい行として 'Enter'を押して、 'br'ボタンを完全に取り除くことができます。私は理解していますが、これはあなたの問題ですよね?また、
が挿入されていますが、htmlタグなので表示されません。ブラウザの要素を調べて、追加されたことを確認できます。私はbrボタンなしで完全な作業コードを追加する答えを更新しています。それがあなたが望むものでないかどうか私に教えてください。 – Anddo

関連する問題