Javascript: Updating a Span Text

Question

I was developing a script that will update a text using javascript, unfortunately it is not working for some reason! here's the script I am using:

 <script type="text/javascript">
        function update(data)
        {
            //Ali
            var a;
            if(document.getElementById("level").value = "5")
            {
                a = 0.1;
            }

            if(document.getElementById("level").value == "10")
            {
                a = 0.35;
            }

            var y;
            var x = data.value;
            y = a * x;
            document.getElementById("pricep").innerHTML == "$"+y;
        }


    </script>
                    <select class="box-select" name="level" id="level">
                        <option value="5">Level 5</option>
                        <option value="10">Level 10</option>
                    </select>
<!-- a lot of code -->
  <input type="number" required="" placeholder="Purchase Amount" max="250" min="1" name="amount" id="refamount" value="<?php echo $_POST['amount']?>" ONCHANGE="update(this)">
 <span class="box-label" id="pricep">0 USD</span>

flagged as low quality. you need to brush up on your JavaScript before you ask this question. I mean, confusing = with ==? Not grouping the var's at the top of the function? [This question belongs on CodeReview.](http://codereview.stackexchange.com/) — , May 19 '14 at 15:50
Im really new to developing and javascript, im not an educated guy. — user3554384, May 19 '14 at 15:51
http://stackoverflow.com/questions/5024056/how-to-pass-parameters-on-onchange-of-html-select — gongzhitaao, May 19 '14 at 15:52
welcome @user3554384, please avoid the haters. learning is a process and sometimes it's painful. but know that I was once like you and know your pain. hang in there! — artlung, May 19 '14 at 16:11

score 0 · Answer 1 · answered May 19 '14 at 15:51

Two things:

Move the onchange to your select
Change = to == in your ifs.

<select class="box-select" onchange="update(this)" name="level" id="level">
    <option value="5">Level 5</option>
    <option value="10">Level 10</option>
</select>
<!-- a lot of code --> <span class="box-label" id="pricep">0 USD</span>

jsFiddle example

score 0 · Answer 2 · answered May 19 '14 at 15:51

Move the onchange event to the select and change the assignement operators (=) to is equal(==). Like:

<script type="text/javascript">
    function update(data)
    {
        //Ali
        var a;
        if(data == "5")
        {
            a = 0.1;
        }

        if(data == "10")
        {
            a = 0.35;
        }

        var y;
        var x = data.value;
        y = a * x;
        document.getElementById("pricep").innerHTML = "$"+y;
    }


</script>
                <select class="box-select" name="level" id="level" onchange="update(this.value)">
                    <option value="5">Level 5</option>
                    <option value="10">Level 10</option>
                </select>
<!-- a lot of code -->
<span class="box-label" id="pricep" >0 USD</span>

I used onchange on a span instead of the input, ive updated the post please read it. — user3554384, May 19 '14 at 17:04

artlung · Answer 3 · 2014-05-19T16:07:02.450

How about:

<select class="box-select" name="level" id="level">
   <option value="5">Level 5</option>
   <option value="10">Level 10</option>
</select>
<!-- a lot of code -->
<span class="box-label" id="pricep">0 USD</span>

And

var levelSelectBox = document.getElementById('level');

function updatePrice() {
     var level = levelSelectBox.options[levelSelectBox.selectedIndex].value;
     var factor = 0;
     level= parseInt(level, 10); // turn it into an integer
     if(level === 5) {
         factor = 0.1;
     } else if (level === 10) {
         factor = 0.35;
     }
     var price = factor * level;
     document.getElementById("pricep").innerHTML = "$" + price;
}

levelSelectBox.onchange = updatePrice;

Further reading: Comparison operators, document.getElementById, parseInt, HTMLSelectElement.

score 0 · Answer 4 · answered May 19 '14 at 16:05

I highly recommend you use a library like jQuery.

http://jsfiddle.net/j3e3b/

<select class="box-select" name="level" id="level">
    <option value="5">Level 5</option>
    <option value="10">Level 10</option>
</select>
<!-- a lot of code -->
 <span class="box-label" id="pricep">0 USD</span>


$(function () {
    $('#level').bind('change', u);

    function u(event)
    {
        select = event.target
        console.log(select);
        // select comes from 'this'
        //Ali
        var a;
        if($(select).val() == "5")
        {
            a = 0.1;
        }

        if($(select).val() == "10")
        {
            a = 0.35;
        }
        console.log($(select).val());

        var y;
        var x = parseInt($(select).val());
        y = a * x;
        document.getElementById("pricep").innerHTML = "$"+y;
    }
});

Javascript: Updating a Span Text

4 Answers4