-1

I have this as my function, it's currently just a test.

<button onclick=function test()>Test The Function!</button>
<script>
    function test(){
           return('Try Again!')
          }
</script>
According to the console whenever I call on the function, "expected expression, got end of script" Are there any errors or am I doing this wrong? The function is in the head. Edit: In response to the comments, this is my code after attempting to do what the comments said. Note: This does not work for me. I am using Firefox, and it is on the f12 editor on the about:blank page. 

<html><head></head><body>
<script>
  function test() {
    alert("You clicked the button");
  }
  </script>
  <button onclick="test()">Using Javascript</button>
</body></html>

Yes, I know this works in the snippet or fiddle, but it doesn't work in the html code in an about:blank page. Can anyone figure out the problem? I click the button and NOTHING happens.

DimensionalDrift
  • 27
  • 7
  • 1
    I'm voting to close this question as off-topic because the above code in the second example already works, OP has issue somewhere else and cannot be duplicated – Adam Buchanan Smith Mar 25 '16 at 22:42

3 Answers3

0

You need to update your code to:

<button onclick="test()">Test The Function!</button>

You will also have to move the function definition before the call in the html, or else test will be undefined.

user6114874
  • 19
  • 3
  • I'd also suggest they move the function definition before the button. – Harris Mar 25 '16 at 18:59
  • @HarrisWeinstein why? javascript runs after the page loads, it would not make a difference in this example. – Adam Buchanan Smith Mar 25 '16 at 19:44
  • @AdamBuchananSmith Can you give me a source for that? IIRC, inline scripts are processed synchronously (though they may in turn make async calls), and that's backed up in [this post](http://stackoverflow.com/questions/2342974/when-does-the-browser-execute-javascript-how-does-the-execution-cursor-move). – Harris Mar 25 '16 at 19:47
  • @HarrisWeinstein you just took X to answer Y, not related. Good effort though. – Adam Buchanan Smith Mar 25 '16 at 19:50
  • @AdamBuchananSmith If that wasn't such a vague comment, I'd think you were disputing what I said. – Harris Mar 25 '16 at 19:57
  • @HarrisWeinstein It is always good practice to move script tags to the end of the page before the `

    `

     – Adam Buchanan Smith Mar 25 '16 at 19:57
  • 2
    Scripts that depend on the DOM should go at the end. Scripts that are relied on by the DOM should go ahead. It looks like you work with a lot of jQuery and active DOM manipulation, so I get why your first thought would be to put the scripts at the end, but you've to to remember that it's not the only system. – Harris Mar 25 '16 at 20:08
  • @HarrisWeinstein in this case you are very much correct. in this example if the script is placed after the button, the click event does not know what the `test` function is – user6114874 Mar 25 '16 at 20:15
0

Few issues I see:

  1. Wrap the function call in "
  2. Create script above the template
  3. Calling the function without the word function
  4. Where do you expect to return in the function? If you want to see something in the console use console.log or if you want an alert use alert().

Not all of those are wrong but its best to struct them like that.

fiddle: https://jsfiddle.net/8x0avrv5/

Complete code:

<script>
    function test(){
        alert('Try Again!');
    }
</script>

<button onclick="test()">Test The Function!</button>
AlexD
  • 4,062
  • 5
  • 38
  • 65
-1

To answer your question this is the correct syntax:

<button onclick="return click1()">
  Using javascript
</button>

javascript

function click1() {
    alert("You clicked the button");
    return true;
}

As another option you can use Jquery instead

<button id="click">
  Using jquery
</button>

Jquery

  $("#click").click(function() {
    alert("You clicked the button");
  });

See examples here: https://jsfiddle.net/hzkwxo3q/2/

Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39