2016-06-30 12 views
0

JavaScriptを初めて使ったので、この句読点($)のような他の質問に何を書き込んでいるのか理解できません。誰でも私にこれをやるための最も簡単な方法を教えてもらえますか?<textarea>で特定の部分を強調表示するJS

私の最初のアイデアは、要素を生成してからそれを色づけることでした。その後、テキスト領域の値を要素のテキスト内容に置き換えました。

<script type="text/javascript"> 
    function active1() { 
     var w = document.getElementById("infor"); 
     var z = document.getElementById("infor").value; 
     var h = z.length; 
     var u = document.getElementById("search").value; 
     var q = u.length; 
     var answer = []; 
     var string =""; 
     for(var i = 0;i<h;i++) 
     { 
      for(var t=0;t < q; t++) 
      { 
       if(z[i+t] === u[t]) 
       { 
        answer.push(z[t+i]); 
        if(answer.length === q) 
        { 
         var b = i + t; 
         for(var v in answer) 
         { 
          string += answer[v]; 
         }  
         var create = document.createElement("p"); 
         create.textContent = string; 
         create.id = "get"; 
         document.getElementById("bye").appendChild(create); 
         var get = document.getElementById("get"); 
         var a = z.replace(z.substr(i,b),get.innerHTML); 
         w.style.color = "red"; 
         var y = document.createElement("p"); 
         y.innerHTML = create.innerHTML; 
         document.getElementById("superman").appendChild(y); 
         w.value = a; 
         break; 
        } 
       } 
       else 
       { 
        answer = []; 
        break; 
       } 
      } 
     } 
    } 
</script> 
<input type="search" id="search" placeholder="type here"> 
<input type = "button" value="search" onclick="active1()"/> 
<textarea rows="50" cols = "100" id="infor"></textarea> 
<div id="bye"></div> 
<div id="superman"><div> 
+0

$はjQueryのに使用され、あなたのコードに応じて、とにかくそれはDOM要素を選択するために使用されていますから学習するための最良のサイトには、(HTTP [jQueryの]でそれを使用していない。//www.jquery .com) –

+0

もちろん、私はそれを使う方法を知らなかった。どうすれば自分のコードでそれを使うのだろうか。 –

+0

しかし、今は分かっている。 –

答えて

0

$演算子はjQueryのに関連している:

は、ここに私のコードです。あなたが<body>タグの終わりかheadセクションに次の行を追加する必要があり、あなたのコード内でjQueryのを使用するには:ここではjQueryのを使用するために

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

は一例です:

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function(){ 
 
     $("p").click(function(){ 
 
      $(this).hide(); 
 
     }); 
 
    }); 
 
    </script> 
 
    </head> 
 
    <body> 
 

 
    <p>If you click on me, I will disappear.</p> 
 
    <p>Click me away!</p> 
 
    <p>Click me too!</p> 
 
    </body> 
 
    </html>

あなたの練習への答え:

<html> 
 

 
<head> 
 
    <title>hi</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("#clickme").click(function() { 
 
     $("body").append('<p id="gen" style="color:red">'+$("#getme").val()+'</p>'); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <input id="getme" type="text" placeholder="Content here..." /> 
 
    <button id="clickme">Click!</button> 
 
</body> 
 

 
</html>

+0

ありがとうございました –

+0

"#clickme"と書いてあります。私のために "#"を定義できますか? –

+0

CSSに精通していますか?特定のidを持つ要素にアクセスするためのCSSでは '#id'を使用し、特定のクラスでは' .class'を使用します。 JQueryは、CSSセレクタをCSSで使用できない ':even' antなどのいくつかのアドオンセレクタとともに使用しています。 –

関連する問題