javascript - 如何使用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>