2

ユーザー入力を取得してJS変数に変換し、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">
        <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>
4

5 に答える 5

2

document.onload関数に次のように記述します。

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

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

于 2012-04-14T17:55:43.647 に答える
2

JavaScriptの動作は、想像しているものとは少し異なります。

あなたが言う時...

document.write(theInput.value);

...どこかのhtml要素の真ん中で、ページが最初にレンダリングされたときに一度だけ呼び出します。

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

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

ただし、関数から呼び出されるとページ全体document.write()が上書きされるという点で少し異なります。

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

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

これらのプリンシパルに慣れたら、jQueryのようなこれらのことを行うためのフレームワークをチェックすることで、あなたの生活をはるかに楽にし、コードをよりクロスブラウザーフレンドリーにしたいと思うでしょう：http：//jquery.com/

更新（付加価値）： 興味のある人のために、ここで求められているようなことは、AngularJS（http://angularjs.org/）を使用する「ページレス」のJavaScriptベースのWebアプリケーションで今日非常に簡単に実行できます。ドキュメントと、このテクノロジーを利用できる適切な状況をよく読んでください。FAQ（http://docs.angularjs.org/misc/faq）から始めて、ビデオ（http://www.youtube.com/user/angularjs）に移動します。

于 2012-04-14T18:05:54.940 に答える
0

ボタンがクリックされた後に更新が行われるはずです。

<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-14T18:03:38.097 に答える
0

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

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

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

  2. 1つ以上のイベントハンドラーを入力に手続き的にアタッチします。

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

  3. イベントハンドラーに入力の値を取得させ、ページを変更してもらいます。

    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機能のみを意図的に使用しています。

一般的な反射システムの場合：

<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-14T18:09:32.423 に答える
-1

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

<div class="page-header">
  <h1>Input:
    <script language="JavaScript" type="Text/JavaScript">
      document.write(theInput.value);
    </script>
 </h1>
</div>
于 2012-04-14T17:58:52.913 に答える