JavaScriptを使用してテキストボックスに文字列を書き込む

Question

ページの特定の部分がクリックされたときに、非表示の入力にテキストを渡す必要があります。私は適切に渡す方法がわからない

function myFunct(the_text) { 
 
    document.getElementById('id01').value = the_text; 
 
    return; 
 
}

<input type="text" id="id01" value="write here" /> 
 

 
<a href="#" onclick("myFunct("this text should go on the box ");"); /> click me </a> 
 
</br> 
 
<a href="#" onclick("myFunct("or this one ");"); /> No! Click me </a> 
 
</br>

：

（それが動作するかどうかを確認するために、入力=「テキスト」で）これの最も簡単なバージョンは、次のようになります関数のパラメータとしての文字列。

Answer 1

を取得するJavaScriptこんにちは以下のコードを試してみてください。私は以下のコードをチェックアウト、私は作業例だと思いますおよびHTML。 onclickあなたが使用しようとしているが、他のどのようなHTMLの属性であり、形を取る：

onclick="" 

だからあなたの要素は次のようなものになります。また、

<a href="#" onclick="myFunct('or this one ')" /> 

注の使用を文字列の別の引用符。 JavaScriptは一重引用符または二重引用符を使用できます。したがって、ここで一重引用符を使用すると、二重引用符で囲まれたHTML属性の解析を妨げません。

---

また、HTMLからJavaScriptを完全に削除することもできます。あなたの要素を与えるid値：

<a href="#" id="someID" /> click me </a> </br> 

、クリックハンドラを追加するためにそれらを識別するために、これらを使用します（あなたが質問でそのタグを持っているので）

document.getElementById('someID').onclick = function() 
{ 
    myFunct('or this one '); 
}; 

同じアプローチは、jQueryを使って使用することができます。理想的には、jQueryを使用するかどうかに関係なく、コードからマークアップを分離する一般的な方向に移動したいと考えています。

Answer 2

HTMLコードに間違いがあります。角括弧の代わりにonclick="sth"のようにする必要があります。あなたのHTMLコード内のいくつかのミスがあった

<input type="text" id="id01" value="write here" /> 
 
<div id="id02"></div> 
 

 
<a href="#" onclick="myFunct('this text should go on the box')" /> click me </a> </br> 
 
<a href="#" onclick="myFunct('or this one')" /> No! Click me </a> </br> 
 

 
<script> 
 
    function myFunct(the_text) { 
 
     document.getElementById('id01').value = the_text; 
 
     document.getElementById('id02').innerHTML = the_text; 
 
    } 
 
</script>

Answer 3

function myFunct(the_text) { 
 
    $("#id01").val(the_text); 
 
    return true; 
 
    return; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="id01" value="write here" /> 
 

 
<a href="#" onclick="myFunct('this text should go on the box');"); /> click me </a> 
 
</br> 
 
<a href="#" onclick="myFunct('or this one ');"); /> No! Click me </a> 
 
</br>

：私は以下のコードをチェックアウト、私は作業例だと思います。ブラケットの代わりにonclick = "some function"のようにする必要があります。あなたがJavaScriptの間の構文を混合している

<input type="text" id="id01" value="write here" /> 

<a href="#" onclick="myFunct('this text should go on the box')" /> click me </a> </br> 
<a href="#" onclick="myFunct('or this one ')" /> No! Click me </a> </br> 

<script> 
    function myFunct(the_text) { 
     document.getElementById('id01').value = the_text; 
    return; 
    } 
</script> 

Answer 4

- ：あなたはjqueryの の代わりに、あなたはデータに

Answer 5

混乱しないでください。onclickのは、HTML構文onclick=なると、この

onclick="myFunct('text')" 

はこの試しのように使用する必要があります。

function myFunct(the_text) { 
 
\t \t \t alert(the_text); 
 
     document.getElementById('id01').value = the_text; 
 
    return; 
 
    }

<input type="text" id="id01" value="write here" /> 
 

 
<a href="#" onclick="myFunct('this text should go on the box');" /> click me </a> 
 
</br> 
 
<a href="#" onclick="myFunct('or this one');" /> No! Click me </a> </br>

別のオプションをjQueryの使用することです "あなたの本当のガールフレンドです？"一例として。

$("#me").click(function() { 
 
    $("#target").text("Sorry, he picked me."); 
 
}); 
 

 
$("#otherme").click(function() { 
 
    $("#target").text("I know you'll choose me."); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="target"> 
 
    Who's your real girlfriend? 
 
</div> 
 

 
</br> 
 
<a href="#" id="me">Choose Me</a> 
 
</br> 
 
<a href="#" id="otherme">Please choose Me</a>

Answer 6

構文エラーがあります。

<a href="#" onclick='myFunct("this text should go on the box")' /> click me </a> </br> 
<a href="#" onclick='myFunct("or this one ")' /> No! Click me </a>