Funktion in Javascript

Question

Ich weiß nicht, warum andere Ergebnisse nicht wie resultk1 0 im Ergebnis nur funktionieren.

function afficher() { 
 
    var Black = document.forms.col.k.value; 
 
    var Cyan = document.forms.col.c.value; 
 
    var Magenta = document.forms.col.m.value; 
 
    var Yellow = document.forms.col.y.value; 
 
    var Orange = document.forms.col.o.value; 
 
    Red = document.forms.col.r.value; 
 
    Blue = document.forms.col.b.value; 
 
    Black2 = document.forms.col.k1.value; 
 
    var Width = document.forms.col.W.value; 
 
    var meters = document.forms.col.Mets.value; 
 
    var resultk = Black * Width * meters 
 
    var resultC = Cyan * Width * meters 
 
    var resultM = Magenta * Width * meters 
 
    var resultY = Yellow * Width * meters 
 
    var resultO = Orange * Width * meters 
 
    var resultR = Red * Width * meters 
 
    var resultB = Blue * Width * meters 
 
    var resultk1 = Black2 * Width * meters 
 

 
    document.getElementById("Afficher").innerHTML = "Black1 is : " + resultk; 
 
    document.getElementById("Afficher").innerHTML = "Cyan is : " + resultC; 
 
    document.getElementById("Afficher").innerHTML = "Magenta is : " + resultM; 
 
    document.getElementById("Afficher").innerHTML = "Yellow is : " + resultY; 
 
    document.getElementById("Afficher").innerHTML = "Orange is : " + resultO; 
 
    document.getElementById("Afficher").innerHTML = "Red is : " + resultR; 
 
    document.getElementById("Afficher").innerHTML = "Blue is : " + resultB; 
 
    document.getElementById("Afficher").innerHTML = "Black2 is : " + resultk1; 
 

 
}

div.Head { 
 
    background-color: #1e3785; 
 
    color: white; 
 
    margin: 20px 0 20px 0; 
 
    padding: 20px; 
 
} 
 

 
div.Tb { 
 
    background-color: lightblue; 
 
} 
 

 
h1 { 
 
    background-color: #1e3785; 
 
    text-align: center; 
 
    color: white; 
 
}

<div class="Head"="Head"> 
 
    <h1>Diprints</h1> 
 
    <h2>Calculate Consumation of Inks</h2> 
 
</div> 
 
<div class="Tb"> 
 
    <table> 
 
    <form id="col" action="index.html" method="post"> 
 
     <tr> 
 
     <td><label for="black"><b>Black : </b></label></td> 
 
     <td><input type="text" name="k" value=""></td> 
 
     <td><label for="">Width :</label></td> 
 
     <td><input type="text" name="W" value=""></td> 
 

 
     <td><button type="button" name="Calculer" value="Calculer" onclick="afficher()">Calculer</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label for="black">Cyan : </label></td> 
 
     <td><input type="text" name="c" value=""></td> 
 
     <td><label for="">Meters :</label></td> 
 
     <td><input type="text" name="Mets" value=""></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label for="black">Magenta : </label></td> 
 
     <td><input type="text" name="m" value=""></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label for="black">Yellow : </label></td> 
 
     <td><input type="text" name="y" value=""></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label for="black">Orange : </label></td> 
 
     <td><input type="text" name="o" value=""></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label for="black">Red : </label></td> 
 
     <td><input type="text" name="r" value=""></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label for="black">Bleu : </label></td> 
 
     <td><input type="text" name="b" value=""></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label for="black">Black : </label></td> 
 
     <td><input type="text" name="k1" value=""></td> 
 
     </tr> 
 
    </form> 
 

 
    </table> 
 
</div> 
 

 

 
<div id="Afficher"> 
 

 
</div>

Answer 1

Der Code document.getElementById("Afficher").innerHTML ersetzt den Text in Ihrem div jedes Mal, bis er auf die letzte Zuweisung wird, die angezeigt wird, und geschieht "Black2 is : " + resultk1 zu sein.

Ich denke, das eher wie ist das, was Sie erreichen wollen würde:

HTML

<div class="Head"> 
     <h1>Diprints</h1> 
     <h2>Calculate Consumation of Inks</h2> 
    </div> 
    <div class="Tb"> 
     <table> 
     <form id="col" action="index.html" method="post"> 
      <tr> 
      <td><label for="black"><b>Black : </b></label></td> 
      <td><input type="text" name="k" value=""></td> 
      <td><label for="">Width :</label></td> 
      <td><input type="text" name="W" value=""></td> 

      <td><button type="button" name="Calculer" value="Calculer" onclick="afficher()">Calculer</button></td> 
      </tr> 
      <tr> 
      <td><label for="black">Cyan : </label></td> 
      <td><input type="text" name="c" value=""></td> 
      <td><label for="">Meters :</label></td> 
      <td><input type="text" name="Mets" value=""></td> 
      </tr> 
      <tr> 
      <td><label for="black">Magenta : </label></td> 
      <td><input type="text" name="m" value=""></td> 
      </tr> 
      <tr> 
      <td><label for="black">Yellow : </label></td> 
      <td><input type="text" name="y" value=""></td> 
      </tr> 
      <tr> 
      <td><label for="black">Orange : </label></td> 
      <td><input type="text" name="o" value=""></td> 
      </tr> 
      <tr> 
      <td><label for="black">Red : </label></td> 
      <td><input type="text" name="r" value=""></td> 
      </tr> 
      <tr> 
      <td><label for="black">Bleu : </label></td> 
      <td><input type="text" name="b" value=""></td> 
      </tr> 
      <tr> 
      <td><label for="black">Black : </label></td> 
      <td><input type="text" name="k1" value=""></td> 
      </tr> 
     </form> 

     </table> 
    </div> 


    <div id="Afficher"> 

    </div> 

<script> 
function afficher() 
    { 
    var Black 
    Black = document.forms.col.k.value; 
    Cyan = document.forms.col.c.value; 
    Magenta = document.forms.col.m.value; 
    Yellow = document.forms.col.y.value; 
    Orange = document.forms.col.o.value; 
    Red = document.forms.col.r.value; 
    Blue = document.forms.col.b.value; 
    Black2 = document.forms.col.k1.value; 
    var Width 
    Width = document.forms.col.W.value; 
    var meters = document.forms.col.Mets.value; 
    var resultk = Black*Width*meters 
    var resultC = Cyan*Width*meters 
    var resultM = Magenta*Width*meters 
    var resultY = Yellow*Width*meters 
    var resultO = Orange*Width*meters 
    var resultR = Red*Width*meters 
    var resultB = Blue*Width*meters 
    var resultk1 = Black2*Width*meters 

var result 
    result = "Black1 is : " +resultk + "<br>"; 
    result = result + "Cyan is : " +resultC + "<br>"; 
    result = result + "Magenta is : " +resultM + "<br>"; 
    result = result + "Yellow is : " +resultY + "<br>"; 
    result = result + "Orange is : " +resultO + "<br>"; 
    result = result + "Red is : " +resultR + "<br>"; 
    result = result + "Blue is : " +resultB + "<br>"; 
    result = result + "Black2 is : " +resultk1 + "<br>"; 
    document.getElementById("Afficher").innerHTML= result ; 
    } 
    </script> 

CSS

div.Head { 
    background-color: #1e3785; 
    color: white; 
    margin: 20px 0 20px 0; 
    padding: 20px; 
} 
    div.Tb { 
     background-color: lightblue; 
    } 
     h1 { 
     background-color: #1e3785 ; 
     text-align: center; 
     color: white; 
     } 

hier ein working jsfiddle. Hoffe das hilft.