www.webdeveloper.com
Results 1 to 13 of 13

Thread: Ideas: JavaScript code for calculating values between two drop down lists

  1. #1
    Join Date
    Feb 2012
    Posts
    15

    Ideas: JavaScript code for calculating values between two drop down lists

    Hello everyone,

    I'm new to the forum and I love how helpful everyone is.

    Does anyone know where I can get JavaScript code, at least a starting point, for producing a calculator/anlayzer that will analyze two identical drop down lists based on values I'd assign each item in the drop down lists?

    Example:

    - Drop down 1: 10 movie titles
    - Drop down 2: the same 10 movie titles
    - Calculate button that gets results of my ranking of the 10 movies, and advises which movie is better based on let's say a value from 1-100

    If anyone has any ideas on how to start this, or where to find code, it would be greatly appreciated.

    Thanks again and I'm excited to learn a lot from this site. It's a great place to be, I can tell already. I've already learned a lot just reading for 2 hours straight!

    -bob

  2. #2
    Join Date
    Feb 2012
    Posts
    15
    ... oh and if I didn't make it clear, the point of it would be:

    1. The user selects the item (ie. a movie) in the first drop down, then another item (ie. a movie) in the second drop down...
    2. After hitting the "calculate" or "analyze" button, it would get the result of my rankings of the movies
    3. If the same item was selected in both lists, an "equal" type figured would be produced, as they would have identical values given they were the same item

    Sorry if that first post wasn't clear enough as far as what i'm after.

    Thanks again, everyone.

  3. #3
    Join Date
    Nov 2010
    Posts
    978
    hello Bob and welcome.

    let me get this straight: you assign different values to the same movies, put them in a list, then when you select one, it multiplies (or adds or whatever) the value from the first list to the corresponding title from the second list, then displays the result?

    just checking, before we go any further. And you wouldn't happen to have already made the two lists by any chance, would you?

  4. #4
    Join Date
    Feb 2012
    Posts
    15
    Quote Originally Posted by xelawho View Post
    hello Bob and welcome.

    let me get this straight: you assign different values to the same movies, put them in a list, then when you select one, it multiplies (or adds or whatever) the value from the first list to the corresponding title from the second list, then displays the result?

    just checking, before we go any further. And you wouldn't happen to have already made the two lists by any chance, would you?
    The drop down lists will not only have the same item names, but the same values attached to each list, meaning each drop down could essentially use the same two identical lists (And always would).. the calculation would merely spit out the following:

    List one:
    The Firm (70 out of 100)
    Dumb and Dumber (85 out of 100)
    Limitless (89 out of 100)
    Warrior (95 out of 100)
    Tree of Life (20 out of 100)
    * values hidden on drop down

    List Two (the same exact list and values):
    The Firm (70 out of 100)
    Dumb and Dumber (89 out of 100)
    Limitless (89 out of 100)
    Warrior (95 out of 100)
    Tree of Life (20 out of 100)
    * values hidden on drop down

    1. So let's say I select "The Firm" in drop down list one
    2. ... then I select "Warrior" in drop down list two
    3. Then I hit "Calculate"
    4. I would want the result to read "The Firm is better by 25%

    In example two:

    1. Let's say I select "Dumb and Dumber" in drop down list one
    2. ... then I select "Limitless" in drop down list two
    3. Then I hit "Calculate"
    4. Because both have values of 89, I would want result to read something like "These two have equal value"

    Does that make better sense?

    I am sorry I don't have more prepared and I can't thank you enough for your time.

  5. #5
    Join Date
    Feb 2012
    Posts
    15
    xelawho,

    Thank you for your response.

    Yes, but both lists will be using the same data, we're just talking about two different drop down lists (but same info in each)... so here are the lists for example:

    DROP DOWN 1:
    -Dumb and Dumber (value=72)
    -Limitless (value=85)
    -Gladiator (value=95)
    -Tree of Life (value=20)
    -Warrior (value=95)

    DROP DOWN 2:
    -same list as drop down 1

    Scenario 1:

    1. Let's say you select 'Dumb and Dumber' in drop down list 1
    2. ... then you select 'Gladiator' in drop down list 2
    3. ... then you hit "calculate"
    4. ... the result would say "Gladiator is 10% better than 'Dumb and Dumber'

    Scenario 2:
    1. Let's say you select 'Gladiator' in drop down list 1
    2. ... then you select 'Warrior' in drop down list 2
    3. ... then you hit "calculate"
    4. ... the result would say 'Gladiator' is equal to 'Warrior' (because they share the same value of 95 out of 100).

    So essentially the values are hidden, but they translate into a % in the "answer" the calculator produces.

    I hope that is clear and I can't thank you enough for your help and consideration.

  6. #6
    Join Date
    Feb 2012
    Posts
    15
    Sorry about the double post, i guess my first post was being held in moderation. I didn't think it went through.

    Thanks again, xelawho! I look forward to your response.

  7. #7
    Join Date
    Nov 2010
    Posts
    978
    I think this is what you're talking about - does it really need to go by percentages? this works on straight addition/subtraction. Personally I would get rid of the button and call the function when the user selects the second movie by changing the second select tag to this:
    Code:
    <select id="movies2" onchange="calcVals()">
    but that of course is up to you...
    Code:
    <html>
    <head>
    <body>
    <select id="movies1">
    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>
    <option value=89>Limitless</option>
    <option value=20>Tree of Life</option>
    </select>
    
    <select id="movies2">
    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>
    <option value=89>Limitless</option>
    <option value=20>Tree of Life</option>
    </select>
    <input type="button" value="show score" onclick="calcVals()"/>
    <div id="results"></div>
    <script type="text/javascript">
    
    function calcVals() {
    var score1=document.getElementById("movies1").value
    var score2=document.getElementById("movies2").value
    var pick1=document.getElementById("movies1").options[document.getElementById("movies1").selectedIndex].text
    var pick2=document.getElementById("movies2").options[document.getElementById("movies2").selectedIndex].text
    var grandscore=score1-score2;
    if (grandscore==0){
    document.getElementById("results").innerHTML=pick1+" is as good as "+pick2
    } else {
    document.getElementById("results").innerHTML=grandscore>0?pick1+" is better than "+pick2+" by "+grandscore+" points":pick2+" is better than "+pick1+" by "+Math.abs(grandscore)+" points"
    	}
    }
    </script>
    
    </body>
    </html>
    Last edited by xelawho; 02-13-2012 at 09:59 AM.

  8. #8
    Join Date
    Feb 2012
    Posts
    15
    Wow. I'll try this as soon as I get home and let u know! Thx!!!

  9. #9
    Join Date
    Feb 2012
    Posts
    15
    xelawho:

    Wow is all i can say! That is exactly it! I can't thank you enough.

    One more question, if you don't mind...

    Let's say I wanted to add this one addition:

    1. Make it so there are TWO drop downs vs. TWO drop downs: Meaning, four exactly the same drop downs, but PAIRED IN TWOS (comparing 2 vs. 2) and spitting out one result suggesting which pair is better. I know this won't make much sense for movies, but I'd like to use this logic for other things when comparing multiple items vs. multiple items (but all drop down lists have the same population):

    Example:

    One side:
    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>

    and

    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>

    vs.

    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>

    and

    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>

    As the user, you are forced to do a 2 vs. 2 evaluation, or a 1 vs. 1 evaluation, where the answer would read (after calculation):

    Dumb and Dumber and the Warrior are better than The Firm and Dumber and Dumber by 25 points

    Thanks again, buddy! I am floored by the helpfulness around here. It's amazing.

  10. #10
    Join Date
    Nov 2010
    Posts
    978
    it's basically the same thing, but you're going to have score1,2,3,4 and pick1,2,3,4 and grandscore is going to be score1+score2-score3+score4 and so on.

    give it a go, and if you get into trouble, post back

  11. #11
    Join Date
    Feb 2012
    Posts
    15
    Ok, I'm close. I think... I have edited this a couple times, so this is where I'm stuck.. it calculates, but wrong

    <html>
    <head>
    <body>
    <select id="movies1">
    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>
    <option value=89>Limitless</option>
    <option value=20>Tree of Life</option>
    </select>
    <select id="movies2">
    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>
    <option value=89>Limitless</option>
    <option value=20>Tree of Life</option>
    </select>

    <p>Vs.</p>

    <select id="movies3">
    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>
    <option value=89>Limitless</option>
    <option value=20>Tree of Life</option>
    </select>
    <select id="movies4">
    <option value=70>The Firm</option>
    <option value=85>Dumb and Dumber</option>
    <option value=95>Warrior</option>
    <option value=89>Limitless</option>
    <option value=20>Tree of Life</option>
    </select>
    <input type="button" value="show score" onclick="calcVals()"/>
    <div id="results"></div>
    <script type="text/javascript">

    function calcVals() {
    var score1=document.getElementById("movies1").value
    var score2=document.getElementById("movies2").value
    var score3=document.getElementById("movies3").value
    var score4=document.getElementById("movies4").value
    var pick1=document.getElementById("movies1").options[document.getElementById("movies1").selectedIndex].text
    var pick2=document.getElementById("movies2").options[document.getElementById("movies2").selectedIndex].text
    var pick3=document.getElementById("movies3").options[document.getElementById("movies3").selectedIndex].text
    var pick4=document.getElementById("movies4").options[document.getElementById("movies4").selectedIndex].text
    var grandscore=score1+score2-score3+score4;
    if (grandscore==0){
    document.getElementById("results").innerHTML=pick1+pick2+" is as good as "+pick3+pick4
    } else {
    document.getElementById("results").innerHTML=grandscore>0?pick1+pick2+" is better than "+pick3+pick4+" by "+grandscore+" points"ick3+pick4+" is better than "+pick1+pick2+" by "+Math.abs(grandscore)+" points"
    }
    }
    </script>

    </body>
    </html>
    Last edited by billybobt; 02-13-2012 at 08:31 PM.

  12. #12
    Join Date
    Nov 2010
    Posts
    978
    kinda closer. the last bit needs to be like this:
    Code:
    var grandscore=(Number(score1)+Number(score2))-(Number(score3)+Number(score4));
    if (grandscore==0){
    document.getElementById("results").innerHTML=pick1+" and "+pick2+" are as good as "+pick3+" and "+pick4
    } else {
    document.getElementById("results").innerHTML=grandscore>0?pick1+" and "+pick2+ " are better than "+pick3+" and "+pick4+" by "+grandscore+" points":pick3+" and "+pick4+ " are better than "+pick1+" and "+pick2+" by "+Math.abs(grandscore)+" points";
    }

  13. #13
    Join Date
    Feb 2012
    Posts
    15
    I can't thank you enough, xelawho! You are good, my friend! I am going to read my JavaScript and PHP books and hope to soon contribute and not just ask.

    Thanks again!!!! This site rocks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles