return value from onClick
return value from onClick
我写了一个方法,可以帮助将图像上传到页面。有一个文本区域,带有和输入区域,用于上传id为imgFileUploadQwersergsd 的文件
function forumImageUpload() {
if (!($("input#imgFileUploadQwersergsd").length)) {
$("div").last().append("<input id='imgFileUploadQwersergsd' type='file' data-url='/Images' style='display:none;' />");
}
var uploader = $("input#imgFileUploadQwersergsd");
$("div").last().append("<button id='ok' onClick ='"returnString('imgFileUploadQwersergsd')'">" + "Ok" + "</button>");
returnString方法返回上传的文件名:
function returnString(stringValue) {
var imgSrc = document.getElementById(stringValue).value();
var pos = imgSrc.lastIndexOf("''");
if (pos != -1) {
imgSrc = imgSrc.substr(pos);
}
return imgSrc;
}
我的问题是,如何在代码中进一步使用returΩString方法的返回值?
只需为结果分配一个变量:
var result = returnString("someString");
编辑:
刚刚注意到:var imgSrc = document.getElementById(stringValue).value();
,.value
不是一个方法,它是一个属性,删除()
。
var imgSrc = document.getElementById(stringValue).value;
显然,只有当用户决定单击按钮时,才会单击该按钮。因此,当用户单击该按钮时,您无法预测何时执行要运行的代码。幸运的是,正如您所发现的,javascript允许您通过onclick
事件拦截按钮点击。
这意味着,使用returnString()
返回值的唯一方法是从onclick处理程序内部。
例如,假设您有一个函数想要使用returnString()
的结果。在本例中,我们称之为doSomething()
。使用returnString()
返回值的第一个明显方法很简单:
$("div").
last().
append(
"<button id='ok' onClick ='"doSomething(returnString('imgFileUploadQwersergsd'))'">" +
"Ok" +
"</button>"
);
但我的是那么丑陋。多个引号的地狱和一个比页面宽度长的字符串。更不用说,如果你想对结果进行任何额外的处理,你最终不得不在字符串中维护javascript代码:
"<button id='ok' onClick ='"" +
"var x = returnString('imgFileUploadQwersergsd');" +
"if (x.match(somePattern)) {" +
" doSomething(x);" +
"}" +
"'">"
这几乎不可读,而且是一个等待发生的语法错误。只是否。。不要这样做。
相反,您可以创建字符串形式的HTML,让jQuery为您解析,并在javascript:中执行javascript
$("div").last().append("<button id='ok'>OK</button>");
$("#ok").click(function(){
// from previous example:
var x = returnString('imgFileUploadQwersergsd');
if (x.match(somePattern)) {
doSomething(x);
}
});
看,不再引用地狱,更容易阅读和维护。
但是等等,如果你仍然想返回点击函数的表单来使用doSomething()
的结果呢?例如,如果你试图做这样的事情:
function forumImageUpload() {
// ...
var result;
$("#ok").click(function(){
var x = returnString('imgFileUploadQwersergsd');
if (x.match(somePattern)) {
result = doSomething(x);
}
});
doSomethingElse(result); // DOES NOT WORK!
}
这不起作用,因为当调用doSomethingElse
时,按钮还没有被点击。解决方案是将需要使用returnString
或doSomething
结果的任何和所有代码移动到事件处理程序内部:
function forumImageUpload() {
// ...
$("#ok").click(function(){
var result;
var x = returnString('imgFileUploadQwersergsd');
if (x.match(somePattern)) {
result = doSomething(x);
doSomethingElse(result); // WORKS!
}
});
}
但是等等,你说,如果你想让forumImageUpload
返回这个值怎么办?可能是这样的:
function forumImageUpload() {
// ...
$("#ok").click(function(){
var result;
var x = returnString('imgFileUploadQwersergsd');
if (x.match(somePattern)) {
result = doSomething(x);
return doSomethingElse(result); // WONT WORK
}
});
}
var y = forumImageUpload();
doYetAnotherThing(y); // DOES NOT WORK!
处理这种情况的方法是让forumImageUpload
接受回调,并在回调中移动所有想要使用结果的代码:
function forumImageUpload(callback) {
// ...
$("#ok").click(function(){
var result;
var x = returnString('imgFileUploadQwersergsd');
if (x.match(somePattern)) {
result = doSomething(x);
result = doSomethingElse(result);
if (callback) {
callback(result); // execute a callback instead of returning
}
}
});
}
forumImageUpload(function(y){
// move code that needs to use the result in here:
doYetAnotherThing(y); // WORKS!
});
以上基本上就是如何处理异步代码,它涵盖了从onclick事件到ajax调用再到setTimeout的所有内容。轻松地将函数传递给javascript中的函数。你会做很多的。
var imgSrc = document.getElementById(stringValue).value;
- 如何在执行此特定onclick事件时执行JavaScript函数
- Setting default onclick behavior for <img> tag in gene
- Javascript全局onclick监听器
- 如何调用“;链接_;在onclick事件上使用Javascript
- onclick函数需要双击,因为类分配延迟
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 使用onclick绘制SVG路径
- 如何将数据从onclick按钮传递到变量
- 选择onclick事件jquery
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 如何刷新列表框内容onclick或blur事件
- OnClick/Onhover Javascript/jquery
- 执行php函数的onclick事件的其他替代方案
- Javascript onclick函数会立即调用(而不是在单击时调用)
- 动态创建OnClick事件Javascript
- onclick风格的整个李不想要
- return value from onClick
- call html onclick from jquery
- 通过表单中的onclick from按钮设置输入值:
- onclick setAttribute href from a src