Calculer la somme du contenu DIV

Question

J'ai un formulaire avec plusieurs boîtes SELECT et une valeur apparaît en fonction de la sélection de l'utilisateur. Ceci fonctionne pleinement.

Maintenant, je veux un script qui calcule la somme de ces valeurs soit automatiquement ou en appuyant sur un bouton.

Le code complet j'est jusqu'à présent ceci:

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

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

Si quelqu'un pouvait aider, ce serait génial. Je ne peux vraiment pas le comprendre. Merci beaucoup!!

Answer 1

J'ai modifié votre JavaScript légèrement pour répondre pour le calcul, et maintenant il fonctionne très bien:

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; 
}​ 

Exemple ici: http://jsbin.com/awici/2

Cependant, je vous suggère que vous avez utilisé une autre approche, comme celui-ci est un peu floconneux, et traite les nombres comme des chaînes.

Une bonne approche serait de stocker les valeurs dans des champs cachés, puis de simplement calculer les valeurs dans ce champ. J'espère que cela éclaircira les choses et vous aidera. N'hésitez pas à demander ce que vous ne comprenez pas