javascriptのaddeventlistenerを使用してボタンをクリックした後の入力テキストの値を変更する

JavaScriptを使用してボタンのクリックでテキストフィールドフォームの変更を入力して入力テキストを変更しようとしています。私はなぜそれが動作していないかを理解するのが難しいです。どんな助けもありがとう。javascriptのaddeventlistenerを使用してボタンをクリックした後の入力テキストの値を変更する

<!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title> </title> 

    <script type="text/javascript"> 


    function start(){ 
     var button = document.getElementById("button"); 
     button.addEventListener("click", buttonPressed, false); 
    } 

    function buttonPressed(){ 
     var text = document.getElementById("textField").value; 
     text.value = "GMU"; 
    } 

    window.addEventListener("load", start, false); 

    </script> 

    </head> 

    <body> 
     <form> 
      <input id="textField" type="text" value=""> 
      <input id="button" type="button" value="Button"> 
     </form> 
    </body> 
    </html>

出典

2016-10-20 Kevin

コード作品。コンソールに何らかのエラーがありますか？ –

問題はここにある：

var text = document.getElementById("textField").value; 
text.value = "GMU";

は、上記の行を見てみましょう。要素の値を取得してtextに格納していますが、次にtext.valueを割り当てようとしていますか？次のような状況を考慮してください。

inputの値が現在「Apples」であるとします。実行：

var text = document.getElementById("textField").value;

"Apple"をtextに保存します。今、あなたはない：text以来

text.value = "GMU";

は文字列であり、そしてあなたは、文字列のために存在しないプロパティvalueにアクセスしようと、それは動作しません - あなたはvalueプロパティに1あまりにも何度もアクセスしてきました。今

- 変数店が値上記のコードでは、textは唯一のプロパティ値を保持し、それが実際の要素のvalueプロパティを指していないことを意味し、要素の値を参照しないことに注意してください。したがって、あなたは、直接そのような値のプロパティを変更する必要があります：

document.getElementById("textField").value = "GMU";

これは、あなたが要素自体のプロパティを変更するので、あなたは変数にコピーしていない動作します。

要素がオブジェクトであり、オブジェクトがメモリを指す参照を持って、あなたがオブジェクトに割り当てるときに、参照が割り当てられ、それが指しているのであなたが代わりに変数に要素を格納し、 element.value = "val"を行うことができます

メモリ内の同じ場所に移動します。

出典

2016-10-20 00:32:31 Li357

ありがとうございます！最小時間が経過すると受け入れます。 – Kevin

@ケビンNo problem、喜んで – Li357

ボタンの入力テキストを変更するには、addEventListenerをボタンのすぐ上に使用します。その後、入力フィールドを変更することができます。

var button = document.getElementById("button"); 
 
var text = document.getElementById("textField"); 
 

 
button.addEventListener('click', function() { 
 
    text.value = "GMU"; 
 
});

<form> 
 
    <input id="textField" type="text" value=""> 
 
    <input id="button" type="button" value="Button"> 
 
</form>

出典

2016-10-20 00:39:13

フィードバックありがとう！間違いなく効率的！ – Kevin

javascriptのaddeventlistenerを使用してボタンをクリックした後の入力テキストの値を変更する

答えて

関連する問題