How can I return value instead of console.log

Question

Thanks to @redsquare's answer on question Javascript/jQuery - How do I obtain name of the class of clicked element? I am using the following JS to log innerText of the CSS class and a parent element.

The code has the desired outcome in console however I need to return the value instead of using console.log(). What would be the best way to do this?

I need to pass this value into a tag management system.

My attempts to include a return statement into the existing code have not worked.

window.onclick = function(e) {
  var classList = e.target.className.split(/\s+/);
  for (i = 0; i < classList.length; i++) {
    if (classList[i] === 'myClass') {
      console.log(e.target.innerText + " - " + e.target.parentNode.parentElement.children[1].innerText);
    }
  }
}

    <span class="myClass">Click here</span> and more text

You can't `return` because you are inside of an event. That's not how it works. What *exactly* are you trying to do? — gen_Eric, Mar 30 '17 at 14:27
Change `console.log()` to `inserIntoTagManagement()` and have that process the string — mplungjan, Mar 30 '17 at 14:29
@DaveNewton I mean there is no value returned in the console (using Chrome dev tools). Does that help? — pete, Mar 30 '17 at 14:31
So what you mean by return is the `console.log` line is not executing? `console.log(e.target.className)` is it what you expect? `console.log(e.target)` My guess is event.target is not what you think it is. — epascarello, Mar 30 '17 at 14:32
I agree the downvotes seem eager here. Anyway, you're inside an event handler, which is async. Just trying to "return" wouldn't make sense (you might want to do some reading on async JS methods), there's nothing practical to "return" to. You'd want to trigger an "I'm done here's the data" event of some kind (where your console.log is now), with a payload of whatever you want out of that handler. Something would be listening for that and get the payload data. Async more or less means, "when you're ready, let me know via (some notification/event), meantime I'll be doing other stuff." — Tim Consolazio, Mar 30 '17 at 14:38
@pete It's an event handler; you have to handle everything in the event handler. What are you trying to do with the data once you have it? Why can't you call a function that handles the result(s) in the handler, either one at a time, or with a collection at the end? — Dave Newton, Mar 30 '17 at 14:38
@RocketHazmat I need return the value that is logged to the console. Apologies, I am new to this. — pete, Mar 30 '17 at 14:47
@pete: `return` it to *where*? What do you want to do with the value? Save it in a variable? Pass it to a function? Why can't you just change `console.log()` to something like `yourFunction()`, then process the passed value? — gen_Eric, Mar 30 '17 at 14:48
@RocketHazmat The aim it to use this JS to pass the value into a tag management system. The tag fires when a user clicks the CSS class and it needs to capture the value my code logs to the console. Hope this helps. — pete, Mar 30 '17 at 15:04
@SagarV as I mentioned I am simply looking for a solution to the problem, I am a JS novice. Any suggestions welcome.. — pete, Mar 30 '17 at 15:07
@pete: How do you call this "tag management system"? Have you tried the suggestion in the posted answer(s)? — gen_Eric, Mar 30 '17 at 15:08
@pete , I suggest you to take a look at the function section of js documentation in SO — Sagar V, Mar 30 '17 at 15:08
@RocketHazmat The tag management system is called Ensighten, I would us the JS in that system to capture the value and add it to a floodlight to monitor user activity. I have tried the suggested answer which shows the correct value as an `alert`. In past experience the value was passed successfully when `return`ing the value, hence the confusion. — pete, Mar 30 '17 at 15:18
@pete: How did a `return` work successfully in the past? What code did you use to add a tag to this "Ensighten" system or whatever? What ***methods*** did you have to *call* to do that? You'll need to call those same methods here, just with the value you have. — gen_Eric, Mar 30 '17 at 15:26
@RocketHazmat Sorry for the late reply, here is an example of JS that was returning a value to the console - `function plan() { var one = document.querySelector('h1').innerText.split(" ")[2].slice(1); var two = document.querySelector('h1').innerText.split(" ")[3]; return one + " " + two; } plan();` As mentioned earlier, the JS has the value I need in the console from the `console.log()` but the tag management system needs to capture this value. Any suggestions? Cheers. — pete, Apr 05 '17 at 14:16
@epascarello As far as I am aware if the value is `return`ed in the console (dev tools) this will work in the tag management system I am using. Is there a way for me to store this value instead of using `console.log()`? The suggested answer simply shows the value as an `alert` which is not working. I have tried using `return` instead of `alert` but this is not working due to the JS being async (I believe) — pete, Apr 05 '17 at 14:22
So store it into a variable. I am not sure what you are expecting to do when you store it. Some other code needs to sit there and listen for that variable to change. I think you need to change your logic, but not knowing what you are doing exactly is hard to help. — epascarello, Apr 05 '17 at 14:26
@epascarello I have a list of phone numbers all using the same CSS class. When a user clicks on a phone number I need to capture the `innerText` value of the CSS class and the `innerText` of a parent element. The JS will be added into a tag management system in order to capture the `innerText` value of the class and its parent **on click**. Hope that helps, any questions please let me know. I obviously have a lot of reading to do. — pete, Apr 05 '17 at 14:38
So than you call your function that does the add with the text instead of calling the console.log line. `yourFunction(e.target.innerText)` It is just like the answer below. — epascarello, Apr 05 '17 at 15:23
@epascarello The answer below makes the value appear as an alert, which does not pass the value into the system I am using and shows the dialog box every time a user clicks on a phone number. I just need the JS to capture the value. Does that make sense? — pete, Apr 05 '17 at 15:32
The alert is a demo. You change the code to call whatever the system is or store it into whatever variable you want. — epascarello, Apr 05 '17 at 15:35

score 1 · Answer 1 · answered Mar 30 '17 at 14:38

Change console.log() to a function you write, here processTagContent()

function processTagContent(str) {
  alert(str);
  // here you can ajax stuff to server
}
window.onclick = function(e) {
  var classList = e.target.className.split(/\s+/);
  for (i = 0; i < classList.length; i++) {
    if (classList[i] === 'myClass') {
      processTagContent(e.target.innerText + " - " + e.target.parentNode.parentElement.children[1].innerText);
    }
  }
}

    <span class="myClass">Click here</span> and more text

How can I return value instead of console.log

1 Answers1