return value from onClick

return value from onClick

本文关键字：onClick from value return      更新时间：2023-09-26

我写了一个方法，可以帮助将图像上传到页面。有一个文本区域，带有和输入区域，用于上传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;
相关文章：