All geek questions in one place

Javascript onclick in script

Ok im new for javascript, but I want to call the onclick function without adding onclick = "function ()" to the anchor tag. Here is the script I have, but I cannot get it to work:

<script type="text/javascript"> function clicka() { alert("hi"); } document.getElementById('click').onclick = clicka; </script> <a href="#" id="click">click</a>

When I click on the link, it should warn "hello", any ideas?

+4
source share
5 answers

Place the script after the a tag or wrap the script inside window.onload . Any of them will work:

 <script type="text/javascript"> window.onload = function() { function clicka() { alert("hi"); return false; } document.getElementById('click').onclick = clicka; } </script> <a href="#" id="click">click</a>

Or:

 <a href="#" id="click">click</a> <script type="text/javascript"> function clicka() { alert("hi"); return false; } document.getElementById('click').onclick = clicka; </script>

The reason it doesn't work is because you bind to the click event of tag a before tag a ; therefore, he does not find any elements and will do nothing.

By placing the script inside window.onload , you tell the browser to run the script only after all the elements on the page are loaded and the element is found.

To prevent browser redirection to # , you can return false from your clicka function, as I noted above.

+4
source

Place the SCRIPT tag after tag A. The browser parses the tags sequentially, and A does not yet exist when the SCRIPT tag is parsed.

Some other comments too:

  • You can reset type="text/javascript"
  • You can set href = "javascript: void (0)" to avoid hash key pollution when pressed
  • Or you return false; in its onclick function
+6
source

Your script runs before the page is fully loaded. Therefore document.getElementById ('click') returns nothing. If you want to save your script at the top, you need to add the onload event to the body:

 <script type="text/javascript"> function clicka() { alert("hi"); } function init() { document.getElementById('click').onclick = clicka; } </script> <body onload="init()"> <a href="#" id="click">click</a> </body>

Or you can use window.onload

 <script type="text/javascript"> function clicka() { alert("hi"); } function init() { document.getElementById('click').onclick = clicka; } window.onload = init; </script> <a href="#" id="click">click</a>
+2
source

Tatu Ulmanen's decision is correct, but it is worth discussing why. Here's a kind of quick and dirty explanation of what happens when the page loads.

JavaScript and the DOM are two different things. In short, the DOM is a hierarchical data structure that represents the HTML page from which the API is exposed through JavaScript through objects like document and others.

DOM can be considered as an unbalanced tree with an arbitrary (not fixed) number of nodes at any level. When the page loads, each node / element / tag is evaluated and anchored to the DOM tree in the order in which it occurs. When a script element is encountered, it is fully computed and executed before evaluating the rest of the HTML document.

Since your script node is in front of a node that it refers to, a node does not yet exist in the DOM tree, which is the cause of your problem. By moving the script element after the nodes that are referenced (usually at the bottom of the page before the closing body tag), these types of errors are avoided. Another common practice is to use the DOM onload ; this cancels the execution of any function assigned as a handler until the entire HTML page is parsed / displayed in the DOM tree. The later method also allows you to include your script anywhere on the page you want (for example: in head ).

+2
source

if the function is before the tag, document.getElementById('click') returns null . So put it after the tag and it will work.

0
source

Source: https://habr.com/ru/post/1300232/

More articles:


All Articles