Блог

Что я пытаюсь сделать, так это сохранить некоторые пользовательские данные из текстового поля html в переменную JS, а затем по нажатию кнопки поместить этот текст в iframe.

Извлечение информации из текстового поля с помощью jQuery не является проблемой, поскольку я могу консольный журнал ‘$(‘#userinput’).val()’ который возвращает значение, но затем сохраняет его в переменную, похоже, возвращает пустую строку.

Это мой код, который использует как jQuery, так и ваниль для попытки сохранить строку:

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

Запутался.

Любая помощь приветствуется 🙂

Вам нужно получить значение #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> 

когда вы инициализируете значение output в строке 4, пользовательский ввод по-прежнему отсутствует, поэтому 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>
 

вы снова удлиняете свой код, по-прежнему используя $(‘#userinput’).val() вместо $result после вашего объявления. Закройте свой входной тег