I know this is asked a few times on S.O.
but none of the answers seem to match my situation . So, 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 & 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: