0

I want a div to just call a function(not move my position on the page) but instead of calling my JavaScript function - it moves my location on the page

what am I doing wrong? (running inside of joomla)

Why is my JavaScript function not being called in my div?

http://....com/test.php#p3


<div id="p1" onclick="testFunction()"> 
</div>

<div id="p3">Some content</div>
<script type="text/javascript">
   testFunction();
</script>
</div>


<script type="text/javascript">


function testFunction() {
   alert("Test");
}
</script>
Improve this question
10
  • 2
    Try to place those script tags above that div. Commented Feb 16, 2014 at 4:04
  • 1
    What do you mean by "called in my div"? Functions aren't related to any specific DOM element. Commented Feb 16, 2014 at 4:05
  • the only problem I can see the testFunction is called in a script block before it is declared in another script Commented Feb 16, 2014 at 4:06
  • it should throw an error saying Uncaught ReferenceError: testFunction is not defined Commented Feb 16, 2014 at 4:06
  • Are you talking about #p3 in the URL? The meaning of a hash in the URL is to scroll to that element. Commented Feb 16, 2014 at 4:06

2 Answers 2

Reset to default
1

It's because you have two separate script blocks, the first one calling the function defined in the second one. Put them into one single block and it will work.

<div id="p1" onclick="testFunction()">click me</div>
<div id="p3">Some content</div>
<script type="text/javascript">
testFunction();
function testFunction() {
    alert("Test");
}
</script>

Comments saying you need to define it at the top are not true, see here: http://jsfiddle.net/xDf5e/

They would be true if you defined a variable function like: var testFunction = function(.... Generally, you should define functions at the top of your JS blocks, it makes the code more readable and maintanable, but that's not the reason your script is not working.

Note: you can see the onclick works fine as well in the example I gave you.

You have a nice tutorial about function hoisting here: http://elegantcode.com/2011/03/24/basic-javascript-part-12-function-hoisting/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

-1

Testfunction should be defined first before use

 <script type="text/javascript">
     function testFunction() {
        alert("Test");
  }
 </script>
 <div id="p1" onclick="testFunction()"> 
 </div>
 <div id="p3">Some content</div>
 <script type="text/javascript">
   testFunction();
 </script>
 </div>
Improve this answer

6 Comments

That's not true, see my answer. It would be true if you defined a variable like: var testFunction = function(....
thanks for your comment. But my solution does also work as i tested before i posted
It does work, of course, but it doesn't answer the question ('Why...?').
I explained. According to the original problem, author has 2 different script blocks and testfunction() is called in one script block before its declaration in another block. Your solution is right because you call and define function in one script block. I do not think i deserve a down vote.
Yeah, that's what my answer says. Sorry, I didn't see your explanation.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.