[英]How to store a value as a string from a text input using javascript
What I'm attempting to do is to save some user input from a html text field into a JS variable and then on a button click place that text into an iframe. 我正在尝试做的是将一些用户输入从html文本字段保存到JS变量中,然后在按钮上单击将该文本放入iframe。
Retrieving the information from the text field using jQuery isn't the issue as I can console log '$('#userinput').val()' which returns the value but then saving it into a variable seems to return an empty string. 使用jQuery从文本字段中检索信息不是问题,因为我可以控制日志'$('#userinput')。val()'返回值但是将其保存到变量似乎返回一个空字符串。
This is my code which uses both the jQuery and the vanilla to attempt to store the string: 这是我的代码,它使用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();
});
});
And HTML: 和HTML:
<input type="text" id="userinput">
<iframe id="iframe"></iframe>
<button id="btn_run">Run</button>
Confused. 困惑。
Any help is appreciated :) 任何帮助表示赞赏:)
You need to get the value of #userinput
in your event listener. 您需要在事件监听器中获取
#userinput
的值。 This is because strings are a primitive value and are not passed by reference. 这是因为字符串是原始值,不通过引用传递。 So when you use
.value
you are getting the value at the time of the call. 因此,当您使用
.value
您将获得通话时的值。 When you were in the callback you got the value of an empty string as the input was empty when the value was stored in the output
variable. 当您在回调中时,您获得了空字符串的值,因为当值存储在
output
变量中时输入为空。
The snippet won't work here due to the iframe. 由于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>
when you initialize the value of output
on line 4, there's still no user input, so output == ""
. 初始化第4行的
output
值时,仍然没有用户输入,因此output == ""
。 That value is never updated in your code, so when you call doc.write(output)
you're essentially running doc.write("")
. 该值永远不会在您的代码中更新,因此当您调用
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>
This way, the value is determined when needed. 这样,在需要时确定该值。 In this simple case, there's no reason to define a variable.
在这个简单的例子中,没有理由定义变量。
you don't even really need jQuery for this 你甚至不需要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>
you again elongating your code by still using $('#userinput').val() instead of $result after your declaration. 在声明之后,仍然使用$('#userinput')。val()而不是$ result来再次延长代码。 Do close your input tag
关闭输入标签
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.