Javascript：更新跨度文本

Question

我正在开发一个脚本，该脚本将使用javascript更新文本，但是由于某种原因，它无法正常工作！ 这是我正在使用的脚本：

 <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>

Answer 1

两件事情：

1. 将onchange移至您选择的
2. 在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示例

Answer 2

将onchange事件移动到select并将赋值运算符（=）更改为equal（==）。 喜欢：

<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>

Answer 3

怎么样：

<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>

和

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;

进一步阅读： 比较运算符 document.getElementById ， parseInt ， HTMLSelectElement 。

Answer 4

我强烈建议您使用类似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;
    }
});