-3

When using the onclick event, using "return" and "console.log" in my javascript code do nothing whereas using document.write for example does, so I know its not the code. It may be a dumb question, but why is that? When I have been practicing with Codecademy, they always use console.log or return and the answer pops up.

myArray = [2000, 2200, 2300, 2400, 2600, 3000];
var rand = myArray[Math.floor(Math.random() * myArray.length)];

    function swimWorkout() {
        return rand;
    }
</head>
<body>
    <button onclick="swimWorkout();">Find the length </button>
</body>
Joe cool
  • 51
  • 6
  • https://developer.mozilla.org/en-US/docs/Web/API/Console/log https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return It really seems like this could have been Googled. – David Aug 31 '18 at 02:14
  • 2
    Possible duplicate of [What is console.log?](https://stackoverflow.com/questions/4539253/what-is-console-log) – David Aug 31 '18 at 02:16
  • "If specified, a given value is returned to the function caller." As a matter of fact I did google it and I came up with examples like the quotation that came from your source. That doesnt answer my question, however, because to me "returned to the caller" means that when I code return 1+1 I am going to get 2 not nothing. – Joe cool Aug 31 '18 at 09:04
  • “return 1+1” will indeed return the value “2”. If you have code which is producing a different result, perhaps you could show that code and explain the problem. But that’s not what you asked. You asked what the “return” keyword means. Which is something that can be easily Googled. – David Aug 31 '18 at 10:59
  • Check my first sentence. Feel free to check my code, if you are feeling extra helpful today. Output does not return any value. – Joe cool Aug 31 '18 at 11:54
  • Now that you've actually demonstrated the problem, your confusion is more clear. The function `swimWorkout` does indeed return a value. But the calling code doesn't do anything with that value. *Returning* something doesn't automatically print it to the page. It just returns it to the caller. If you want to output something to the page, use the various JavaScript tools available to select an element (e.g.: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) and set a property on it such as `.innerText`. Use of `document.write()` is often problematic. – David Aug 31 '18 at 12:00

4 Answers4

2

console is a browser application within the browser that writes only to the browser's developer tools. The same is true for console on that web site. It only writes to that site's web page. It does not and cannot alter the HTML document or the DOM.

document.write is javascript running within the browser itself that writes to the HTML document via the DOM.

Rob
  • 14,746
  • 28
  • 47
  • 65
1

The “return” statement actually refers to returning the value you will be passing from a function’s end process and “console.log” will log the data you set on the console section in your browser’s dev tool ( press F12 on your browser and go to console tab ) such as 

function foo() {
   // do something
   return “ran foo function”;
}

console.log(foo());
Nicholas Gew
  • 33
  • 3
1

console.log() sends messages to the console, while document.write() adds content to the html document. I've not used Codeacademy, but I am guessing that things are "popping up" in a console (a place where console.log statements go). Each browser has a console. In Chrome, for example, navigate to View -> Developer -> Javascript Console to see output from your console.log() statements.

Fuligo septica
  • 117
  • 1
  • 7
0

This is indeed returning the value as the documentation states and as you would expect:

function swimWorkout() {
    return rand;
}

However, this is not doing what you seem to expect:

<button onclick="swimWorkout();">Find the length </button>

When you click that button, the function is executed and the value is returned. But there is no instruction anywhere regarding what to do with that value. No reason why it would be displayed anywhere, because there's no code to display it.

You've found a way to potentially display something:

document.write(rand);

However, this can be a problematic approach. document.write() doesn't offer much control over where in the document you'd like to write something. If you have some in-line JavaScript executing as the page loads, it should output right where it is. But anything after that fact probably won't write where you want it to.

Instead, you can use other JavaScript code to select an element and output to it. For example, consider something like this:

myArray = [2000, 2200, 2300, 2400, 2600, 3000];
var rand = myArray[Math.floor(Math.random() * myArray.length)];

function swimWorkout() {
    document.getElementById('output').innerText = rand;
}
<button onclick="swimWorkout();">Find the value</button>
<p>The value is: <span id="output"></span></p>

You can further detach your JavaScript from your HTML (also recommended) by binding to a click event rather than writing the function call inline in the HTML:

myArray = [2000, 2200, 2300, 2400, 2600, 3000];
var rand = myArray[Math.floor(Math.random() * myArray.length)];

function swimWorkout() {
    document.getElementById('output').innerText = rand;
}

document.getElementById('find-value').addEventListener('click', swimWorkout);
<button id="find-value">Find the value</button>
<p>The value is: <span id="output"></span></p>

Keeping the markup and the logic separate quickly becomes much easier to maintain overall.

David
  • 208,112
  • 36
  • 198
  • 279
  • Okay, this makes it more clear. I have never used the addEventListener so i will look more into it. I appreciate the in-depth clarification. – Joe cool Aug 31 '18 at 13:23