How do I add JavaScript code on a webpage?

Question

Could someone please tell me how to get this code working on a webpage? Particularly what should go in the header?

http://jsfiddle.net/mekwall/TJcP4/1/

Sorry if this is a basic question...steep learning curve!

Thanks

The code uses jQuery - all you need to do is include the jquery library in your <head> — Manse
– Manse, Commented Feb 28, 2012 at 13:45
Sorry to appear so dim, but where do I get the jquery library? — user1236274
– user1236274, Commented Feb 28, 2012 at 13:48
No problem - i think its better to point you in the right direction rather then getting you to cut and paste ..... — Manse
– Manse, Commented Feb 28, 2012 at 13:55

Manse · Accepted Answer · 2012-02-28 13:57:22Z

2

Your code is using the jQuery JavaScript library ... so your head will need to contain :

<script type="text/javascript" src="<jquery url>"></script>

Replace the <jquery url> with a valid url to the jQuery library. I suggest you use the Google CDN for the url or alternatively download a copy and store it on your server -> http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Then to ensure your code runs once the DOM is ready wrap all of your JavaScript within the following :

$(document).ready(function() {
    // your code here
});

Docs for ready() here

If your going to be using jQuery more I suggest you start reading here http://docs.jquery.com/How_jQuery_Works and if you going to learn JavaScript, you can't go wrong with reading this too -> https://developer.mozilla.org/en/JavaScript/Guide

edited Feb 28, 2012 at 13:57

answered Feb 28, 2012 at 13:48

Manse

38.1k11 gold badges88 silver badges112 bronze badges

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

Comments

Manse · Accepted Answer · 2012-02-28 13:55:38Z

Copy the code below, save it with a .html extension (e.g. test.html) and then double click to open.

<html>

<head>
<title>Page Title here</title>
</head>
<body>
<select id="t_dermal_name">
    <option value="t_default_dermal">-- Choose --</option>
     <option value="1" rel="30">Between Eyebrows</option>
     <option value="7" rel="30">Individual Line Softening</option>
     <option value="2" rel="30">Lip Contouring</option>
</select>
<select id="t_wrinkle_name">
    <option value="t_default_wrinkle">-- Choose --</option>
     <option value="1" rel="30">Between Eyebrows</option>
     <option value="7" rel="30">Individual Line Softening</option>
     <option value="2" rel="30">Lip Contouring</option>
</select>
<span id="output"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!--You can use a local version of jquery-->
<script type="text/javascript">
$(document).ready(function(){
function onSelectChange(){
    var total = 0,
        dermal = $("#t_dermal_name").find('option:selected'),
        wrinkle = $("#t_wrinkle_name").find('option:selected');

    if(value = dermal.attr('rel')){
        total += parseInt(value);
    }

    if(value = wrinkle.attr('rel')){
        total += parseInt(value);
    }

   $("#output").html(total);


}

$("#t_dermal_name").change(onSelectChange);
$("#t_wrinkle_name").change(onSelectChange);
 });
</script>
</body>

Collectives™ on Stack Overflow

How do I add JavaScript code on a webpage?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related