javascript - How do I put this jQuery code in an external .js file? -
i have jquery code works fine when placed between <body> , </body> tags of .html file.
- i want use javascript external javascript instead of internal. bit works if place javascript @ end before
</body>tag. - if place javascript within
<head></head>not working also.
so need getting javascript code run externally.
- how modify code when place in external .js file?
- and how call code onload?
html
<html> <head> <style> .blue1 {background: green;} .red {background: red;} .orange {background: orange;} .yellow {background: yellow;} </style> </head> <body> <table border="2px solid black">/*border*/ <tr> <td colspan="1"> <p class="hello_blue1">hello stack overflow1</p> </td> <td rowspan="1" colspan="2"> <p class="tab-text-7-aufz_red">hello stack overflow2</p> <p class="tab-text-7_red">defines red color,that class want apply to</p> </td> <td rowspan="1" colspan="1"> <p class="hello_orange">hello stack overflow3</p> </td> <td rowspan="1" colspan="1"> <p class="tab-text-7_yellow">hello stack overflow3</p> </td> </tr> </table> javascript want use external.js
<script> // convert "hello_blue" "blue" function convertclassname(src) { return src.replace(/^.*?_/, ""); } var ptags = document.queryselectorall("table p"); (var = 0; < ptags.length; i++) { ptags[i].parentnode.classname += " " + convertclassname(ptags[i].classname); } </script> </body> </html>
create new file (in same folder html) called example script.js, contains this:
function convertclassname(src) { return src.replace(/^.*?_/, ""); } var ptags = document.queryselectorall("table p"); (var = 0; < ptags.length; i++) { ptags[i].parentnode.classname += " " + convertclassname(ptags[i].classname); } and leave in html:
<html> <head> <style> .blue1 {background: green;} .red {background: red;} .orange {background: orange;} .yellow {background: yellow;} </style> </head> <body> <table border="2px solid black">/*border*/ <tr> <td colspan="1"> <p class="hello_blue1">hello stack overflow1</p> </td> <td rowspan="1" colspan="2"> <p class="tab-text-7-aufz_red">hello stack overflow2</p> <p class="tab-text-7_red">defines red color,that class want apply to</p> </td> <td rowspan="1" colspan="1"> <p class="hello_orange">hello stack overflow3</p> </td> <td rowspan="1" colspan="1"> <p class="tab-text-7_yellow">hello stack overflow3</p> </td> </tr> </table> <script src="./script.js"></script> </body> </html>
Comments
Post a Comment