I was given this chunk of code to place in my html page but I know nothing about javascript so I have no idea where to place it and what kind of tag to place it in.
$('input[type=radio]').change(function() {
$('input[type=radio]').each(function(index) {
$(this).closest('tr').removeClass('selected');
});
$(this).closest('tr').addClass('selected');
});
Including the jQuery Library
That is jQuery code. You'll first need to make sure the jQuery library is loaded. If you don't host the library file yourself, you can hotlink one from the jQuery CDN:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You can do this within the <head> section, but it's fine as long as it's loaded before your jQuery code.
Further reading:
Placing Your Code in the Page
Place your code inside <script> tags. It can be inserted anywhere within either <head> or <body>. If you place it before the <input> and <tr> tags (as referenced in your code), you have to use $(document).ready() to make sure those elements are present before the code is run:
$(document).ready(function() {
// put your jQuery code here.
});
If you want your page content to be loaded as soon as possible, you might want to place it as close as the </body> close tag as possible. But another common practice is to place all JavaScript code in the <head> section. This is your choice, based on your coding style and needs.
Suggestion: Instead of embedding JS/jQuery code directly into an HTML page, consider placing the code in a separate .js file. This will allow you to reuse the same code on other pages:
<script src="/path/to/your/code.js"></script>
Further reading:
You need to wrap this in script tags:
<script type='text/javascript'> ... your code ... </script>
That being said, it's important WHEN you execute this code. If you put this in the page BEFORE the HTML elements that it is hooking into then the script will run BEFORE the HTML is actually rendered in the page, so it will fail.
It is common practice to wrap this type of code in a "document ready" block, like so:
<script type='text/javascript'>
$(document).ready(function() {
... your code...
}}
</script>
This ensures that the entire page has rendered in the browser BEFORE your code is executed. It is also a best practice to put the code in the <head> section of your page.
Inside of your <head></head> tags add...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('input[type=radio]').change(function() {
$('input[type=radio]').each(function(index) {
$(this).closest('tr').removeClass('selected');
});
$(this).closest('tr').addClass('selected');
});
});
</script>
EDIT: The placement inside of <head></head> is not the only option...this could just as easily be placed RIGHT before the closing </body> tag. I generally try and place my JavaScript inside of head for placement reasons, but it can in some cases slow down page rendering so some will recommend the latter approach (before closing body).
You can include JQuery using any of the following:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
- http://code.jquery.com/jquery-latest.min.js (never use this link on production server)
Your code placement can look something like this
```
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('input[type=radio]').change(function() {
$('input[type=radio]').each(function(index) {
$(this).closest('tr').removeClass('selected');
});
$(this).closest('tr').addClass('selected');
});
});
</script>
```
Include javascript using script tags just before your ending body tag. Preferably you will want to put it in a separate file and link to it to keep things a little more organized and easier to read. Theres a simple article here that will show you how http://www.selftaughtweb.com/how-to-include-javascript/
You need this code wrap in tags and put on the end of page. Or create JS file (for example test.js), write this code on it and put on the end of page this tag
