0

私は今、javascript で単純な置換をデバッグしようとして文字通り何日も費やしましたが、それは私を夢中にさせています。助けていただければ幸いです。

ヘッダーに JavaScript 関数を使用し、本文で関数を呼び出す単純な html ファイルを作成すると、要素の内容を取得し、replace メソッドを使用して改行などの innerHTML の特定の文字を置き換えることができます。jsfiddleでもこれを行うことができます。

toedit = toedit.replace(/\n/g, '<br />');

ただし、スクリプトがページのヘッダーにあり、html が ajax を介してページの div に配置されている実際のアプリケーションでは、失敗します。誰でも問題を見つけることができますか?

以下はHTMLページまたはJSFiddleで動作します

<html>
    <head>
    <script type="text/javascript">
    function editText(editThis)
      {
    alert(editThis);
    //alert("hi");
    var toedit = document.getElementById(editThis).innerHTML;
 //       alert(toedit);
    toedit = toedit.replace(/\n/g, '<br />');
    alert(toedit);
      }
    </script>
    </head>
    <body>
    <textarea id="text" name="text" rows=9 cols=30 placeholder="Type Notes">A whole bunch
     of text with
     line breaks goes here</textarea><a href="#" onclick="editText('text');return false;">edit</a>
    </body>
    </html>

次のスクリプトは、id の横に * がある行では実行されません。その行を削除しても機能します。行がコメントアウトされただけでスクリプトが壊れます。

ページのヘッダー:

 <script type="text/javascript">
    function editText(editThis)
      {
         alert(editThis);
         //alert("hi");
         var toedit = document.getElementById(editThis).innerHTML;
         alert(toedit);
         toedit = toedit.replace(/\n/g, '<br />'); //****problem line
         alert(toedit);
      }
    </script>

//ページから呼び出される次の関数は、上記の js へのリンクを含む html で div を埋めます

function loadSteps(id) 
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("stepsDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getsteps.php?id="+id,true);
xmlhttp.send();
} //end function

上記の js 関数から呼び出される getsteps.php

echo '<textarea id="text" rows=9 cols=30 placeholder="Type text">'.$text.'</textarea><a href="#" onclick="editText(\'text\');return false">edit</a>
4

2 に答える 2

0

innerHTMLのコピーである変数を設定しているので、実際にinnerHTMLを直接更新する必要があります

  document.getElementById(editThis).innerHTML=toedit;//once you've done your replace


しかし、 replace（/ \ n / g、'
'）を実行する前に、なぜonreadystatechangeでinnerHTMLを設定するのですか？

HTMLに含まれると、改行が保持されない場合があります。

.responseText.replace(/\n/g, '<br />')

または

.responseText.replace(/\r\n/g, '<br />')
于 2012-12-28T03:05:13.890 に答える
0

問題は次の行にあります。

var toedit = document.getElementById(editThis).innerHTML;

DOM オブジェクトの innerHTML、つまり ID「text」のテキスト領域を取得しています。このオブジェクトの innerHTML は更新されていません。代わりに必要なのは、テキスト領域に入力された実際のテキストを提供するテキスト領域の値です。上記の行を次のように変更します。

var toedit = document.getElementById(editThis).value;

それはあなたの問題を解決するはずです！ハッピーコーディング！

于 2012-12-28T03:22:48.037 に答える