Search code examples
javascripthtmlexternal

SyntaxError: expected expression, got '<', what does that mean?

I have a a basic Html page which tries to use an external JS. The JS file tries to change the content of a paragraph defined in the HTML on a button click, but does not seem to work.

I see the following errors in console:

  1. SyntaxError: expected expression, got '<'

  2. ReferenceError: change is not defined

JSFiddle showing exact source?(except that <html> & <script> tags are removed as jsfiddle - http://jsfiddle.net/p9ko4yde/

HTML Code : 

<h1> Numbers with external script:) </h1>
<p id="number">1</p>
<button type="button" onclick="change()">Toggle between 1 and 2</button>

<script src="myScript.js"></script>



</body>
</html>

JS Code :

<script type="text/javascript">
    function change(){
        var number = document.getElementById('number').innerHTML;
        if(number == '1'){
            document.getElementById('number').innerHTML='2';
        }
        else{
            document.getElementById('number').innerHTML='1';
        }
    }
</script>

File Structure is as below:enter image description here

Solution

  • You don't need the <script> tags when in an external .js file. Use these tags to embed a script inside HTML only.