2017-12-05 24 views
1

文字列URLからいくつかの特殊文字を削除して、htmlで消去した文字列を表示するコードを作成しようとしています。javascript出力がHTMLで表示されない

JavaScriptは動作しますが、ブラウザに結果を表示できません。

コードの全体のポイントは、誰かが入力に入れ、その後、入力がその後、クリーンアップされることですし、その結果は、「結果1」および/または「結果2」に挿入されている

ので、ページのロード時は、ユーザーが「myTextarea」に何かを入力してボタンをクリックすると、cleanupurl(x)が実行されます。

のplsは助ける、これまで

コード

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Clean Strings</title> 
    </head> 
     <body> 
      <div id="display-area" > 
       <textarea placeholder="insert URL here :)" id="myTextarea">.  
       </textarea> 
       <button class = 'btn btn-default' id="demo" onclick=“cleanupurl(myTextarea.text())> Cleanup URL</button> 
      </div> 

      <div id ="result1"> 
       <p></p> 
      </div> 

      <div id ="result2"> 
       <p></p> 
      </div> 
     </body> 
    </html> 
    <script> 
    var splitstring = ['']; 
    var finaloutput = ''; var i = 0; 

    function cleanupurl(urlstring) { 


     //==========================================// 
     urlstring = urlstring.replace(/%21/gi, '!'); 
     urlstring = urlstring.replace(/%23/gi, '#'); 
     urlstring = urlstring.replace(/%24/gi, '$'); 
     urlstring = urlstring.replace(/%26/gi, '&'); 

     //==========================================// 
     splitstring = urlstring.split('http://'); 
     document.getElementById("result1").innerHTML = cleanurloutput1(); 
     //return 
    } 

    function cleanurloutput1(){ 
    return splitstring[1]; 
     } 

    function cleanurloutput2(){ 
    return splitstring[2]; 
     } 

     //document.getElementById("result1").innerHTML = cleanurloutput1(); 

     var x = document.getElementById("myTextarea").value; 
     cleanupurl(x); 



    </script> 
+0

以下の回答のどれもあなたがして、より具体的な情報をあなたの質問を編集してください助けていない場合。 –

答えて

2

(要素myTextAreatextメソッドを持っていない間、あなたのonclickは(エラーのブラウザのコンソールをチェックしてください)myTextarea.text()を通過している

代わりにmyTextarea.valueを使用

<button class='btn btn-default' id="demo" onclick=“cleanupurl(myTextarea.value) > Cleanup URL</button> 
0

ので、私は、デバッグ・ツールを使用して、私のブラウザでコードを実行したときに、私が最初に遭遇した問題があった。

  • 私はあなたがTHS文字だった不正な文字が含まれていたことがわかった()それは二重引用符のように見えますが、私はそれが異なるASCII値を持っていると確信しています。その後、私はあなたのjavascript ....そしてヴィオラにこの変更を行った
    <button class = 'btn btn-default' id="demo" onclick="cleanupurl();"> Cleanup URL</button>

    :私は “cleanupurl(myTextarea.text())

この時点でそれを見つけた私は完全にこのように表示されるようにその行を書き直しあなたのコードは動作します

function cleanupurl() { 

    var urlstring = document.getElementById('myTextarea').value; 
0

あなたのコードにはいくつかの誤りがありますなぜあなたがこのために配列を使用しているのか理解できなかったので、コードを単純化しました。 myTextarea.valueを使用して、textarea要素の値を取得します。

次に、クリーンアップ関数の結果がresult要素の中に入ります。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Clean Strings</title> 
 
</head> 
 

 
<body> 
 
    <div id="display-area"> 
 
    <textarea placeholder="insert URL here :)" id="myTextarea"></textarea> 
 
    <br /> 
 
    <button class="btn btn-default" id="demo" onclick="cleanupurl(myTextarea.value)">Cleanup URL</button> 
 
    </div> 
 
    <p id="result"></p> 
 

 
    <script> 
 
    function cleanupurl(urlstring) { 
 
     urlstring = urlstring.replace(/%21/gi, '!'); 
 
     urlstring = urlstring.replace(/%23/gi, '#'); 
 
     urlstring = urlstring.replace(/%24/gi, '$'); 
 
     urlstring = urlstring.replace(/%26/gi, '&'); 
 
     document.getElementById("result").innerHTML = urlstring; 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

関連する問題