ページ全体でJS変数（HTMLフォームから）を使用する

ユーザー入力を受け取り、JS変数に変換し、htmlの複数の場所で使用しようとしています。ページ全体でJS変数（HTMLフォームから）を使用する

ユーザーが入力を入力した直後に警告機能が組み込まれていますが、その変数は下部に表示できません。私は次のように置くdocument.onload機能で

<body> 
<div class="hero-unit"> 
    <h1> Title </h1> 
    <p> This form description </p> 
     <form class="well" name="formInput" action= "#"> 
     <label>Input</label> 
     <input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="[&quot;AAA&quot;,&quot;BBB&quot;,&quot;CCC&quot;,&quot;DDD&quot;,&quot;EEE&quot;,&quot;FFF&quot;,&quot;GGG&quot;,&quot;HHH&quot;,&quot;III&quot;,&quot;JJJ&quot;,&quot;KKK&quot;,&quot;LLL&quot;]"/>    
     </label> 
     <div class="form-actions" "span3"> 
     <input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/> 
     <script language="javascript" type="text/javascript"> 
      var theInput = document.getElementById('txtvarInput'); 
     </script> 
     </div> 
    </form> 
    </div> 

<div class="page-header"> 
    <h1>Input: 
    <script language="javascript" type="text/javascript"> 
     document.write(theInput.value); 
    </script> 
</h1> 
</div>

出典

2012-04-14 ssikes

あなたはちょうどこのをスキップして、直接要素を呼び出すことはできませんHTML –

とjavascriptのインラインを書いて避ける必要がありますか？ 'document.getElementById（ 'txtvarInput'）。value'？ – Kamil

。ページが最初にレンダリングする際に、右一部のHTML要素の途中のどこかで、それはそれだけで一度呼び出す

あなたが言う...

document.write(theInput.value);

...。

テキスト入力が変更されたときやボタンをクリックしたときに呼び出す場合は、関数に入力して、一部のイベントが発生したときにその関数を呼び出す必要があります。

イベントについて学ぶために、このリンクを参照してください：http://www.w3schools.com/js/js_events.asp

もつとも、document.write()が関数から呼び出された場合、それはページ全体を上書きする場合は、少し違います！

この場合、更新しようとしている要素にテキスト要素を「追加」する必要があります。

ドキュメントオブジェクトモデル（DOM）の詳細とその要素での作業を学ぶために、このリンクを参照してください：http://www.w3schools.com/jsref/dom_obj_element.asp

あなたはこれらの原理に精通しているしたら、あなたの人生は非常に簡単、あなたにしたいでしょうコードよりクロスブラウザのjQueryのようなこれらの事行うためのフレームワークをチェックアウトすることで優しい：http://jquery.com/

UPDATE（付加価値）：興味のある方のために を、ここで求められているもののようなものは、今日非常に簡単に行うことができますAngularJSを使用したJavaScriptベースのWebアプリケーション（http： //angularjs.org/）。この技術を利用できる適切な状況と文書を読んでください。よくある質問（http://docs.angularjs.org/misc/faq）から動画（http://www.youtube.com/user/angularjs）に移動してください。

出典

2012-04-14 18:05:54

-1である必要はありませんが、ほぼ正しいと+1します。 – Phrogz

@Phrogz私はそれが私にいくつかのフラックを得ることを知っていましたが、それは少し怖い初心者を探しているので、私はそれを使用...このリンクはあまり招待されていません：http://www.w3.org/DOM/;）あなたはこのような場合のためのより良いリソースかもしれないサイトを持っていますか？ –

w3foolsのリンクにいくつかのリンクがあるようです... – Arth

：

ここでは、コードです

theInput.onchange = function(event){ 
    document.getElementById('h1Id').innerHTML = theInput.value 
}

は、おそらくあなたは、HTMLは、ユーザーが入力を変更するたびに更新するようにしたいですか？

出典

2012-04-14 17:55:43 Arth

あなたは 'event.target.value'を意味します。しかし、もう一度 'theInput'へのハンドルをすでに持っていれば、関数がクロージャであるので' theInput.value'を使うことができます。 – Phrogz

良い点、更新しました！ – Arth

'change'イベントにのみリンクすることはHTML5範囲入力では機能しません。 'input'イベントハンドラが必要です。（OPがそれらを使用しているのではなく、他の人に警告する） – Phrogz

-1

次のようなインラインスクリプトは、ブラウザがレンダリングするとすぐに実行されます。したがって、以下のスクリプトは、ブラウザが特定のスクリプトタグをレンダリングし、ユーザーが入力を入力する前に実行されるので、作成したグローバル変数にはユーザーが入力したデータは入力されません。グローバル変数を設定してページに表示するページの[送信]ボタンにイベントをアタッチする必要があります。

<div class="page-header"> 
    <h1>Input: 
    <script language="JavaScript" type="Text/JavaScript"> 
     document.write(theInput.value); 
    </script> 
</h1> 
</div>

出典

2012-04-14 17:58:52

ロジックとコンテンツのミックスを防ぐことを十分に知っているなら、インラインスクリプト要素と 'document.write'をどうやってお勧めしますか？ – Phrogz

@Phrogz、私はインラインスクリプトを使用することをお勧めしませんでした。私はちょうど彼らのスクリプトがやっていたことと働いていなかった理由をポスターに説明しました。投稿を慎重に読むと、私は「フォローのようなインラインスクリプト」と言うことに気づくでしょうし、私の声明の下に問題のスクリプトを投稿します。また、慎重に読んだ後、送信ボタンにイベントを添付することをお勧めします。 –

次に、私のdownvoteは、あなたの答えが矛盾するアドバイスを提供し、悪い考え（それがそうであることを示すことなく）であり、ベストプラクティスのためのコードサンプルを含まないコードサンプルを含んでいるという事実を反映していると考えてください。適切と思われるコードで回答を編集すると、私は投票を変更します。 :) – Phrogz

ボタンをクリックすると、更新が行われます。少し違ったあなたが想像されるかもしれないよりも作品のJavaScript

<html> 
<body> 
<div class="hero-unit"> 
    <h1> Title </h1> 
    <p> This form description </p> 
     <form class="well" name="formInput" action= "#"> 
     <label>Input</label> 
     <input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="[&quot;AAA&quot;,&quot;BBB&quot;,&quot;CCC&quot;,&quot;DDD&quot;,&quot;EEE&quot;,&quot;FFF&quot;,&quot;GGG&quot;,&quot;HHH&quot;,&quot;III&quot;,&quot;JJJ&quot;,&quot;KKK&quot;,&quot;LLL&quot;]"/>    
     </label> 
     <div class="form-actions" "span3"> 

     // UPDATED HERE 
     <input name="submit" type="submit" class="btn" value="Select" 
      onclick="alert('you chose ' + theInput.value);  
      document.getElementById('inputresult').innerHTML = theInput.value;"/> 

     <script language="JavaScript" type="Text/JavaScript"> 
      var theInput = document.getElementById('txtvarInput'); 
     </script> 
     </div> 
    </form> 
    </div> 

<div class="page-header"> 
    <h1 id="myh1">Input:</h1> 

    <!-- UPDATED HERE --> 
    <div id="inputresult"> 

    </div> 
</h1> 
</div>

出典

2012-04-14 18:03:38

値のプレースホルダを含むセマンティックマークアップを提供します。手続き上

Input: <span class="inp-reflector"></span> 

<!-- Or, for HTML5+ --> 
Input: <output class="inp-reflector"></output>

あなたの入力に1つ以上のイベントハンドラをアタッチ：

var inp = document.querySelector('#input-id'); 
inp.addEventListener('input',update,false); 
inp.addEventListener('change',update,false);

あなたのイベントハンドラ（s）は、入力の値を取得し、あなたのページを変更有無：

function update(evt){ 
    var changedElement = evt.target; 
    var newValue = changedElement.value; 
    var outputs = document.querySelectorAll('.inp-reflector'); 
    outputs.forEach(function(out){ 
    out.innerHTML = newValue; 
    }); 
}

この回答は、現代ブラウズのJavaScript機能を意図的に使用していますrsのみ。一般的な反射システムの場合

：

<input class="reflectable" data-reflect-to=".bar"> 
… 
document.querySelectorAll('.reflectable').forEach(function(el){ 
    el.addEventListener('change',reflect,false); 
    el.addEventListener('input',reflect,false); 
}); 

function reflect(evt){ 
    var outSelector = evt.getAttribute('data-reflect-to'); 
    document.querySelectorAll(outSelector).forEach(function(o){ 
    o.innerHTML = evt.target.value; 
    }); 
}

出典

2012-04-14 18:09:32 Phrogz

私は混乱するかもしれませんが、複数の入力と出力の場合、特定の入力から特定の出力へのリンクはどこですか？ – Arth

@Arthマッピングは、イベントハンドラを配置するオブジェクトとハンドラが更新する要素を暗黙的に指定します。セレクタに基づいて任意の出力にマッピングする_n_入力を指定できる汎用システムについては、my editを参照してください。 – Phrogz

それは私が後にしたものです！ – Arth

ページ全体でJS変数（HTMLフォームから）を使用する

答えて

関連する問題