CODEWITHSUNDEEP
javascript
user2060766
user2060766

Reputation:

return value from onClick

I wrote a method that helps to upload images to page.There is a text area with and input area to upload file with 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 method return the uploaded file name:

function returnString(stringValue) {
    var imgSrc = document.getElementById(stringValue).value();
    var pos = imgSrc.lastIndexOf("\\");
    if (pos != -1) {
        imgSrc = imgSrc.substr(pos);
    }
    return imgSrc;
}

My question is how can I use the return value from returтString method further in code?

Upvotes: 1

Views: 5685

Answers (3)

slebetman
slebetman

Reputation: 113866

The button is obviously clicked only when the user decides to click it. Therefore, there is no way you can predict when to execute code that you want to run when the user click the button. Fortunately, as you've found out, javascript allows you to intercept the button click via the onclick event.

Which means, the only way to use the return value of returnString() is from inside the onclick handler.

Say for example you have a function that wants to use the result of returnString(). Lets call it doSomething() for this example. The first obvious way to use the return value of returnString() is simply:

$("div").
  last().
  append(
    "<button id='ok' onClick =\"doSomething(returnString('imgFileUploadQwersergsd'))\">" +
      "Ok" +
    "</button>"
  );

But my is that ugly. What with the multiple quoting hell and a string longer than the page width. Not to mention that if you want to do any additional processing with the result you'd end up having to maintain javascript code inside a string:

"<button id='ok' onClick =\"" +
  "var x = returnString('imgFileUploadQwersergsd');" +
  "if (x.match(somePattern)) {" +
  "  doSomething(x);" +
  "}" +
"\">"

That's barely readable and is a syntax error waiting to happen. Just.. no.. don't do this.

Instead you can create the HTML in string form and let jQuery parse that for you and do javascript in 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);
  }
});

See, no more quoting hell and much easier to read and maintain.

But wait, what if you still want to return form that click function to use the result of doSomething()? What if, for example, you're trying to do something like this:

function forumImageUpload() {
  // ...

  var result;

  $("#ok").click(function(){
    var x = returnString('imgFileUploadQwersergsd');
    if (x.match(somePattern)) {
      result = doSomething(x);
    }
  });

  doSomethingElse(result); // DOES NOT WORK!
}

This wouldn't work because when doSomethingElse is called the button have not been clicked yet. The solution is to move any and all code that need to use the result of returnString or doSomething to inside the event handler:

function forumImageUpload() {
  // ...

  $("#ok").click(function(){
    var result;

    var x = returnString('imgFileUploadQwersergsd');
    if (x.match(somePattern)) {
      result = doSomething(x);
      doSomethingElse(result); // WORKS!
    }
  });
}

But wait, you say, what if you want forumImageUpload to return the value? Something like this maybe:

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!

The way to handle a situation like this is to let forumImageUpload accept a callback and move all code that wants to use the result inside the callback:

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!
});

The above is basically how you handle asynchronous code which covers everything from onclick events to ajax calls to setTimeout. Get comfortable passing functions to functions in javascript. You'll be doing it a lot.

Upvotes: 2

Yuan Zhaohao
Yuan Zhaohao

Reputation: 584

var imgSrc = document.getElementById(stringValue).value;

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

Simply assign a variable to the result:

var result = returnString("someString");

Edit:

Just noticed: var imgSrc = document.getElementById(stringValue).value();, .value is not a method, it's a property, remove the ().

var imgSrc = document.getElementById(stringValue).value;

Upvotes: 2

Related Questions