如何使用javascript从文本输入中将值存储为字符串

Question

我正在尝试做的是将一些用户输入从html文本字段保存到JS变量中，然后在按钮上单击将该文本放入iframe。

使用jQuery从文本字段中检索信息不是问题，因为我可以控制日志'$（'＃userinput'）。val（）'返回值但是将其保存到变量似乎返回一个空字符串。

这是我的代码，它使用jQuery和vanilla来尝试存储字符串：

$(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>

困惑。

任何帮助表示赞赏:)

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>

这样，在需要时确定该值。 在这个简单的例子中，没有理由定义变量。

你甚至不需要jQuery

<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

在声明之后，仍然使用$（'＃userinput'）。val（）而不是$ result来再次延长代码。 关闭输入标签