0

I recently wanted to test something, so I wrote a function into elements tab and a simple anchor tag to call that JS function. For some reason, I always get the ReferenceError saying the function is not defined. All I did was open console, type the function between the script tags, and write the anchor tag to click on.

<script type="text/javascript">
    function showResult() {
        var num = 5 * 5;
        alert( num );
    }
</script>
<a onclick="showResult()">Click</a>

It tried to call the showResult() function but I get the ReferenceError every time. However, I put this into an HTML file and opened it up in Chrome and it worked as expected. Does anyone know why I cant write a JS function into the browser and execute it?

Ice76
  • 1,109
  • 8
  • 15

2 Answers2

1

I tested out what (I think) you are talking about. On the "Elements" tab in Chrome dev tools I edited the body and inserted a script tag at the bottom containing a single function, just as you did. I also inserted an anchor element a tag that called that function on click, just as you did.

The browser apparently does not parse a script tag added in this way. I got the same "Uncaught ReferenceError", that the function was not defined. I have no answer as to why it does not parse the script tag added in this way.

To do this in a way that does work. Add the anchor with the onClick calling the function in the "Elements" tab. Then as others have said put the function definition in the console. Now when you click the anchor it will work as expected.

gforce301
  • 2,708
  • 1
  • 16
  • 24
  • 1
    This happens because the JS engines in the browsers compiles the scripts one time (after loading the page and more times if there are an asynchronous script request). To edit the DOM with dev tools and adding/modifying scripts doesn't have effect for the JS engine because you're doing synchronous modifications. – Angel Luis Apr 17 '18 at 18:46
  • Thank you for the comment. I guess that since you can do this: https://stackoverflow.com/a/9413814/1819684 I don't understand why te dev tools do not essentially do the same thing. – gforce301 Apr 17 '18 at 18:56
  • @gforce301 Great link. I also read up on this: https://stackoverflow.com/a/9261355/5749295 it seems that the the JS engine parses everything during DOM loading, and not again. I then added the script as explained above, clicked on "Click" to get nothing. I then added the script from your link, clicked on "Click" and it worked. It seems like the JS engine re-evaluates all of the scripts after submitting something into Console. – Ice76 Apr 17 '18 at 19:02
0

The browser console only accepts JavaScript, so the html and elements won't work in it. The following should work fine:

function showResult() {
        var num = 5 * 5;
        alert( num );
}
showResult();
David Thompson
  • 13
  • 6
  • I've edited the question, I meant to say elements tab in Dev tools. After adding the JS in between the script tags, I couldnt get it to recognize the function – Ice76 Apr 17 '18 at 18:25