Рассчитать сумму содержимого DIV

Question

У меня есть форма с несколькими полями SELECT, и в зависимости от выбора пользователя появляется значение. Это полностью работает.

Теперь мне нужен скрипт, который вычисляет СУММУ этих значений либо автоматически, либо при нажатии кнопки.

Полный код, который у меня есть, таков:

JavaScript:

<script type="text/javascript">
window.onload=function(a,b)
{
    value=document.getElementById('value1'),
    combobox=document.getElementById('first');

    combobox.onchange=function(a)
    {
    document.getElementById('value1').innerHTML = "&euro; " +this.value;
    }

    value2=document.getElementById('value2'), 
    combobox2=document.getElementById('second');

    combobox2.onchange=function(b)
    {
    document.getElementById('value2').innerHTML = "&euro; " +this.value;
    }
}
function changeText(){
var sum;    
sum= (value * 1) + (value2 * 1);
document.getElementById('sum').innerHTML = "&euro; " +this.value;
}
</script>

HTML:

        <ol> 
            <li><label><span>First</span></label>
            <select name="block1" id="first"> 
                <option value="0">Please select...</option>
                <option value="1">Summer</option> 
                <option value="2">Spring</option> 
            </select></li> 
        </ol>       
        <ol> 
            <li><label><span>Second</span></label>
            <select name="block2" id="second">
                <option value="0">Please select...</option> 
                <option value="1">Summer</option> 
                <option value="2">Spring</option> 
                <option value="3">Pink</option> 
                <option value="4">Corporate</option> 
            </select></li> 
        </ol>

        <div id="value1">value 1</div>
        <div id="value2">value 2</div>

        <input type='button' onclick='changeText()' value='Calculate'/> 

        <div id="sum">Total here</div>

Если бы кто-нибудь мог помочь, это было бы здорово. Я действительно не могу понять это. Большое спасибо !!

Answer 1

Я немного изменил ваш JavaScript, чтобы учесть вычисления, и теперь он работает нормально:

window.onload=function(a,b)
{
    value=document.getElementById('value1'),
    combobox=document.getElementById('first');

    combobox.onchange=function(a)
    {
    document.getElementById('value1').innerHTML = "€ " +this.value;
    }

    value2=document.getElementById('value2'), 
    combobox2=document.getElementById('second');

    combobox2.onchange=function(b)
    {
    document.getElementById('value2').innerHTML = "€ " +this.value;
    }
}
function changeText(){
var sum;    
div1Value = document.getElementById('value1').innerHTML.replace(/[^0-9]/g, '')*1;
div2Value = document.getElementById('value2').innerHTML.replace(/[^0-9]/g, '')*1;
sum = div1Value + div2Value;
document.getElementById('sum').innerHTML = "€ " +sum;
}​

Пример здесь: http://jsbin.com/awici/2

Однако я бы предложил вам использовать какой-то другой подход, так как он немного ненадежен и работает с числами в виде строк.

Хороший подход - хранить значения в скрытых полях, а затем просто вычислять значения в них.

Надеюсь, это прояснит ситуацию и поможет вам. Не стесняйтесь спрашивать все, что вы не понимаете