javascriptを使用してテキスト入力から文字列として値を格納する方法

Question

私がしようとしているのは、HTMLテキストフィールドのユーザー入力をJS変数に保存してから、ボタンをクリックしてそのテキストをiframe。

jQueryを使用してテキストフィールドから情報を取得することは、ログ '$（'＃userinput '）をコンソールできるので問題ありません。値を返すが変数に保存するように見えるval（）空の文字列

$(document).ready(function() { 

    $result = $('#userinput').val(); 
    var output = document.getElementById('userinput').value; 
    var iframe = document.getElementById('iframe'); 

    doc = iframe.contentDocument; 
    doc.open(); 
    doc.write("test"); 
    doc.close(); 

    $('#btn_run').click(function() { 
     console.log($('#userinput').val()); 
     console.log(output); 
     console.log($result); 
     doc.open(); 
     doc.write(output); 
     doc.close(); 
    }); 
}); 

そしてHTML：：混乱

<input type="text" id="userinput"> 
    <iframe id="iframe"></iframe> 
    <button id="btn_run">Run</button> 

これは私の文字列を格納しようとするjQueryとバニラの両方を使用するコードです。

すべてのヘルプは高く評価され:)

Answer 1

をイベントリスナーで#userinputの値を取得する必要があります。これは、文字列がプリミティブな値であり、参照によって渡されないためです。したがって、.valueを使用すると、通話時に値が取得されます。あなたがコールバックにいたとき、値がoutput変数に格納されているときに、入力が空だったので空の文字列の値を得ました。

iframeが原因でスニペットが機能しません。

$(document).ready(function() { 
 

 
    $result = $('#userinput').val(); 
 
    
 
    var iframe = document.getElementById('iframe'); 
 

 
    doc = iframe.contentDocument; 
 
    doc.open(); 
 
    doc.write("test"); 
 
    doc.close(); 
 

 
    $('#btn_run').click(function() { 
 
    console.log($('#userinput').val()); 
 
    var output = document.getElementById('userinput').value; 
 
    console.log(output); 
 
    console.log($result); 
 
    doc.open(); 
 
    doc.write(output); 
 
    doc.close(); 
 
    }); 
 
});

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

 
<iframe id="iframe"></iframe> 
 

 
<button id="btn_run">Run</button>

Answer 2

あなたは4行目にoutputの値を初期化するとき、そこにはユーザー入力がまだませんので、output == ""。その値はコード内で決して更新されないので、doc.write(output)に電話すると、基本的にはdoc.write("")が実行されます。

<input type="text" id="userinput"> 
<button id="btn_run">Run</button> 
<iframe id="iframe"></iframe> 

<script type="text/javascript"> 
$(document).ready(function() { 

    var doc = iframe.contentDocument; 

    $('#btn_run').click(function(){ 
    doc.open(); 
    doc.write(document.getElementById('userinput').value); 
    doc.close(); 
    }); 
}); 
</script> 

このように、値は必要に応じて決定されます。この単純なケースでは、変数を定義する理由はありません。あなたも本当にあなたが再びまだ$（「＃のユーザ入力」）を使用してコードを伸長この

<input type="text" id="userinput"> 
<button id="btn_run">Run</button> 
<iframe id="iframe"></iframe> 

<script type="text/javascript">  
    var doc = iframe.contentDocument; 

    function writeToIframe() { 
    doc.open(); 
    doc.write(document.getElementById('userinput').value); 
    doc.close(); 
    } 

    document.getElementById('btn_run').addEventListener('click', writeToIframe); 

</script> 

Answer 3

のためのjQueryを必要としない

。ヴァル（）の代わりに$あなたの宣言の後になるの。あなたの入力タグを閉じてください