関数を起動した後にページを更新しないようにする

Question

2つの行に一連のドロップダウンがあり、2が選択されたときに単純な関数が2つの値を連結し、そのような横に出力：2番目のドロップダウン値が関数の実行を選択し、それがoutput言う出力を表示したら

dropdown1 dropdown2 Output

は、私は何を取得しようとしていること、です。しかし、現時点では、出力が新しいウィンドウに表示されているように見えます。

は、ここで私は今のところ（HTML）持っているものです。

<form> 
<select id="test"> 
<option>Arena/Quantum Barcelona LTBC</option> 
<option>Arena/Quantum Spain LTES</option> 
</select> 

<select id="name" onchange="tryThis()"> 
<option>Name</option> 
<option>Name1</option> 
</select> 

</form> 

はJavaScript：

function tryThis() { 

var string, string1 = ''; 

var e = document.getElementById("test"); 
string = e.options[e.selectedIndex].text; 

var a = document.getElementById("name"); 
string1 = a.options[a.selectedIndex].text; 
document.write(string+'_'+string1); 
} 

私はそれが必要以上に、これはより困難作っています！

Answer 1

これは、document.writeが何かを表示する前にページを消去するためです。あなたはその機能を使う必要はありません。

代わりに、ボディ：

document.body.appendChild(
    document.createTextNode(string + '_' + string2) 
); 

Answer 2

はあなたのJS関数がtryThis()と呼ばれ、イベントハンドラにあなたがtryThsis()

を呼んでいることに気づいたしかし、あなたのケースで私は良い選択肢が追加され、document.writeの使用を控えるだろうDIVを持っていて、そのDIVのinnerHTMLを変更する

Answer 3

最初にフォームにIDを入力して、アクセスしやすくしてください。

var a = (function() { 
    var myForm = document.getElementById("myForm"), 
     magic = function() { 
      var a = myForm.getElementsByTagName("select"), 
       b, 
       c = []; 
      for (b = a.length - 1; b > -1; b -= 1) { 
       c.push(a[b].value); 
      } 
      alert(c.join(" ") + " output"); 
     }; 
    myForm.onclick = magic; 
}()); 

あなたは余分な「出力は」あなたは、データが返されますが、ここであなたは行き​​たいかであるかを想定しているものに関しては固有ではありませんでした。アラートを使用する代わりに、結果を別のフォーム要素の値にプッシュできます。 document.writeを使用しないでください。これは延期できません。 document.write操作を延期しようとすると、現在のページの本文の内容全体が置き換えられます。