jQuery math & variables_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-06 14:46 出处：网络

I\'m trying to take a variable (the value of a text input) and do math to it, then output the result to another element.

相关专题：jquery

I'm trying to take a variable (the value of a text input) and do math to it, then output the result to another element.

I'm running into a few probl开发者_如何学编程ems, namely that it doesn't work.

Here's my code - http://slexy.org/view/s2TIOA5FKw.

Try using parseInt, a JavaScript function.

$('#element_3').val()

When you are working with input fields, you need to use .val to retrieve their value.

EDIT To be clear, by "need to use" I'm saying it's better than the existing code, var $months = $('#element_3'). My apologies if the way I portrayed necessity was inaccurate.

Based on what I could piece together, this is what I came up with. I think this is what you're looking for. If not, I hope it's at least a step towards your solution (and helps you understand how jQuery works). Please comment on the post if you have any questions and I'll do my best to answer them.

Start off with this: http://www.jsfiddle.net/zzd3K/3/ (Working Example)
_{[Commented Version]}

Both commented and working, with a fix to the #element_1 .bind() (spelling error, "kepress" -> "keypress")

HTML

    <html>
  <head>
    ...
    <script type="text/javascript">
      $(function(){
        $('input[name=select]').change(function(){
            $('#select').text($(this).val());
        });
        $('#element_1').bind('keydown keyup keypress', function(){
            $('#advertiserNameDisplay').html($(this).val());
        });
        $('#element_2').bind('keydown keyup keypress', function(){
            $('#adImageDisplay').text($(this).val());
        });
        $('#element_3').bind('keydown keyup keypress', calcPrice);
        function calcPrice(){
            var months = parseInt($('#element_3').val());
            if (!isNaN(months)){
                var rate = 1;
                if (months >= 1 && months < 3){
                    rate = 199;
                }else if (months >= 3 && months < 6){
                    rate = 175;
                }else{
                    rate = 150;
                }   
                var price = rate * months;
                $('#rate').text(rate);
                $('#months').text(months);
                $('#total').text(price);
            }else{
                $('#months').text('-');
            }
        }
        calcPrice();
      });
    </script>
    ...
  </head>
  <body>
    ...
    <fieldset>
        <legend>Configured Values</legend>
        <table>
            <tr>
                <td>Ad:</td>
                <td><input type="text" name="select" value="" /></td>
            </tr>
            <tr>
                <td>Name:</td>
                <td><input type="Text" id="element_1" value="" /></td>
            </tr>
            <tr>
                <td>Ad Image URL:</td>
                <td><input type="text" id="element_2" value="" /></td>
            </tr>
            <tr>
                <td>Months:</td>
                <td><input type="text" id="element_3" value="12" /></td>
            </tr>
        </table>
    </fieldset>
    <br /><br />
    <ul>
        <li>Ad Selected: #<span id="select"></span></li>
        <li>Your Name: <span id="advertiserNameDisplay"></span></li>
        <li>Your Image URL: <span id="adImageDisplay"></span></li>
        <li>Your total is $<span id="total"></span>.00 at a rate of $<span id="rate"></span>.00 per month for <span id="months"></span> months.</li>
    </ul>
    ...
  </body>
</html>

(Don't mind the fieldset, I used it to simulate your controls)

try something like this var newVal = parseInt($('#sourcElement').val());

first of all, it's advised to start the script part at least with:

<script type="text/javascript">

... some systems may have the script tag assigned to VBScript and your JS would therefore not work there.

Secondly, the above comments are right - you need to use .val() to retrieve a value, which is probably what you're trying to do here:

var $months = $('#element_3');

... which should read either:

var $months = parseInt($('#element_3').val());
// check if the value if an integer and reset it to 0 if it's not
if (isNaN($months)) {
    $months = 0;
}

... or: