2016-06-03 11 views
1

ich einen Rechner für ein Spiel zu machen und auf eine Schaltfläche wie folgt aus:Eingangstyp-Taste rufen Sie nicht die Onclick-Funktion Inline

<input type="button" value="Calculate" name="Calc_Button" onclick="cpbCalc()" class="button_is"> 

Wenn Schaltfläche geklickt wird, möchte ich die cpbCalc() Funktion auszuführen.
Sie können diese HTML-Code finden live auf http://trial.6te.net/Calculators/cpbCalculatorNew.html

ist die komplette HTML-Code:

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
     Cost Per Battle Calculator 
    </title> 
</head> 

<style> 
.smaller{ 
    width: 50px; 
    padding: 12px 10px; 
    margin: 0px 0; 
    display: inline-block; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
} 
.bigger{ 
    width: 110px; 
    padding: 12px 10px; 
    margin: 0px 0; 
    display: inline-block; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
} 

.button_is{ 
    width: 110px; 
    background-color: #4CAF50; 
    color: white; 
    padding: 14px 20px; 
    margin: 0px 0; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
} 

.button_is:hover { 
    background-color: #45a049; 
} 

div { 
    border-radius: 5px; 
    background-color: #badf6f; 
    padding:20px; 
} 
</style> 

<body> 
<div> 
    <!-- <label for="fname" id="fn">First Name</label> --> 
    <!-- <input type="text" id="fname" name="firstname"> --> 
    <!-- <button onclick="myFunction()">Calculate</button> --> 
    <table border="0"> 
     <tr> 
      <td> 
       <center><img src="http://trial.6te.net/images/gold.gif"></img></center> 
      </td> 
      <td> 
       <center><img src="http://trial.6te.net/images/wood_s.gif"></img></center> 
      </td> 
      <td> 
       <center><img src="http://trial.6te.net/images/ore_s.gif"></img></center> 
      </td> 
      <td> 
       <center><img src="http://trial.6te.net/images/mercury_s.gif"></img></center> 
      </td> 
      <td> 
       <center><img src="http://trial.6te.net/images/sulphur_S.gif"></img></center> 
      </td> 
      <td> 
       <center><img src="http://trial.6te.net/images/crystal_S.gif"></img></center> 
      </td> 
      <td> 
       <center><img src="http://trial.6te.net/images/gems_S.gif"></img></center> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="text" id="gold_" name="Gold" class="bigger"> 
      </td> 
      <td> 
       <input type="text" id="wood_" name="Wood" class="smaller" value="0"> 
      </td> 
      <td> 
       <input type="text" id="ore_" name="Ore" class="smaller" value="0"> 
      </td> 
      <td> 
       <input type="text" id="mercury_" name="Mercury" class="smaller" value="0"> 
      </td> 
      <td> 
       <input type="text" id="sulphur_" name="Sulphur" class="smaller" value="0"> 
      </td> 
      <td> 
       <input type="text" id="crystals_" name="Crystals" class="smaller" value="0"> 
      </td> 
      <td> 
       <input type="text" id="gems_" name="Gems" class="smaller" value="0"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Durability :<br> 
       <input type="text" id="currDura_" name="Current_Durability" class="smaller">/
      </td> 
      <td> 
       <input type="text" id="maxDura_" name="Maximum_Durability" class="smaller"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Repair Cost :<br> 
       <input type="text" id="repCost_" name="Repair_Cost" class="bigger"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Smith Efficiency :<br> 
       <input type="text" id="smithEffi_" name="Smith_Efficiency" class="smaller"> 
      </td> 
      <td> 
       Smith Charges :<br> 
       <input type="text" id="smithCharge_" name="Smith_Charge" class="smaller"> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="7"> 
       <center><input type="button" value="Calculate" name="Calc_Button" onclick="cpbCalc()" class="button_is"></center> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="7"> 
       <label id="result_"></label> 
      </td> 
     </tr> 
    </table> 
</div> 

<script language="JavaScript"> 
<!-- 
function cpbCalc() { 
    var currDura, maxDura, tempMaxDura, tempDura, totDura, optDura; 
    var iniCost, repCost; 
    var smithEffi, smithCharge; 
    var se, sc; 
    var totCostTillNow, costPerBattle = 0, minCPB; 
    var i; 
    var repCount = 1; 
    //Assigning the values 
    currDura = document.getElementById("currDura_").value; 
    maxDura = document.getElementById("maxDura_").value; 
    iniCost = document.getElementById("gold_").value; 
    repCost = document.getElementById("repCost_").value; 
    smithEffi = document.getElementById("smithEffi_").value; 
    smithCharge = document.getElementById("smithCharge_").value; 

    se = smithEffi/100; 
    sc = smithCharge/100; 
    tempMaxDura = maxDura; 
    tempDura = currDura; 
    totDura = tempDura; 
    totCostTillNow = parseFloat(iniCost); 
    costPerBattle = parseFloat(totCostTillNow/totDura); 
    minCPB = parseFloat(costPerBattle); 
    optDura = parseInt(tempMaxDura); 

    for(i=1; i<=maxDura; i++) 
    { 
     totCostTillNow += parseFloat(repCost * sc); 
     tempDura = parseInt(tempMaxDura * se); 
     totDura += parseInt(tempDura); 
     costPerBattle = parseFloat(totCostTillNow/totDura); 
     tempMaxDura -= 1; 
     if (minCPB >= costPerBattle) 
     { 
      minCPB = parseFloat(costPerBattle); 
      optDura = parseInt(tempMaxDura); 
     } 
    } 
    document.getElementById("result_").value = eval(minCPB) + " gold at 0/"+ eval(optDura); 
    return 0; 
    //alert("minimum cost per battle = " + eval(minCPB) + "at 0/" + eval(optDura)); 
//--> 
} 
</script> 
</body> 
</html> 

Here "result_" ist ein Label, wo ich die endgültige Antwort zur Verfügung stellen möchten.
Wenn ich auf die Schaltfläche klicke, sollte es die Funktion "cpbCalc()" ausführen, tut es aber nicht.

Stattdessen tut es nichts.
Auch wenn ich in der Konsole einchecke, zeigt es keine Fehler. Können Sie mir helfen, warum dies geschieht und eine Lösung dafür anbieten?

+0

Warum Sie einen HTML-Kommentar innerhalb des Skripts haben Block? Die Verwendung von eval ist eine schlechte Idee. '

' ist ein veraltetes Tag. – epascarello

Antwort

0

Es gibt einige Fehler in Ihrem Skript:

  • nie eval verwenden: es ist eine Bedrohung ist und vor allem brauchen Sie nicht es
  • auf Textwerte Zahlen zu konvertieren ein Weg ist, die ein + vor hinzufügen von Wert like + document.getElementById ("currDura _"). Wert
  • vermeiden Division durch Null wie für totDura. Ein Weg kann sein: (totDura == 0)? 1: totDura)
  • Verwendung textContent statt Wert Eigenschaft, um den Text-Label

Das Snippet zu ändern:

function cpbCalc() { 
 
    var currDura, maxDura, tempMaxDura, tempDura, totDura, optDura; 
 
    var iniCost, repCost; 
 
    var smithEffi, smithCharge; 
 
    var se, sc; 
 
    var totCostTillNow, costPerBattle = 0, minCPB; 
 
    var i; 
 
    var repCount = 1; 
 
    //Assigning the values 
 
    currDura = +document.getElementById("currDura_").value; 
 
    maxDura = +document.getElementById("maxDura_").value; 
 
    iniCost = +document.getElementById("gold_").value; 
 
    repCost = +document.getElementById("repCost_").value; 
 
    smithEffi = +document.getElementById("smithEffi_").value; 
 
    smithCharge = +document.getElementById("smithCharge_").value; 
 

 
    se = smithEffi/100; 
 
    sc = smithCharge/100; 
 
    tempMaxDura = maxDura; 
 
    tempDura = currDura; 
 
    totDura = tempDura; 
 
    totCostTillNow = parseFloat(iniCost); 
 
    costPerBattle = parseFloat(totCostTillNow/(totDura == 0) ? 1 : totDura); // avoid division by zero 
 
    minCPB = parseFloat(costPerBattle); 
 
    optDura = parseInt(tempMaxDura); 
 

 
    for(i=1; i<=maxDura; i++) 
 
    { 
 
    totCostTillNow += parseFloat(repCost * sc); 
 
    tempDura = parseInt(tempMaxDura * se); 
 
    totDura += parseInt(tempDura); 
 
    costPerBattle = parseFloat(totCostTillNow/totDura); 
 
    tempMaxDura -= 1; 
 
    if (minCPB >= costPerBattle) 
 
    { 
 
     minCPB = parseFloat(costPerBattle); 
 
     optDura = parseInt(tempMaxDura); 
 
    } 
 
    } 
 

 
    // For labels use textContent instead of value property 
 
    document.getElementById("result_").textContent = minCPB + " gold at 0/"+ optDura; // never use eval 
 
    return 0; 
 
    //alert("minimum cost per battle = " + eval(minCPB) + "at 0/" + eval(optDura)); 
 
    //--> 
 
}
.smaller{ 
 
    width: 50px; 
 
    padding: 12px 10px; 
 
    margin: 0px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
} 
 
.bigger{ 
 
    width: 110px; 
 
    padding: 12px 10px; 
 
    margin: 0px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
} 
 

 
.button_is{ 
 
    width: 110px; 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 0px 0; 
 
    border: none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
} 
 

 
.button_is:hover { 
 
    background-color: #45a049; 
 
} 
 

 
div { 
 
    border-radius: 5px; 
 
    background-color: #badf6f; 
 
    padding:20px; 
 
}
<div> 
 
    <!-- <label for="fname" id="fn">First Name</label> --> 
 
    <!-- <input type="text" id="fname" name="firstname"> --> 
 
    <!-- <button onclick="myFunction()">Calculate</button> --> 
 
    <table border="0"> 
 
     <tr> 
 
      <td> 
 
       <center><img src="http://trial.6te.net/images/gold.gif"></img></center> 
 
      </td> 
 
      <td> 
 
       <center><img src="http://trial.6te.net/images/wood_s.gif"></img></center> 
 
      </td> 
 
      <td> 
 
       <center><img src="http://trial.6te.net/images/ore_s.gif"></img></center> 
 
      </td> 
 
      <td> 
 
       <center><img src="http://trial.6te.net/images/mercury_s.gif"></img></center> 
 
      </td> 
 
      <td> 
 
       <center><img src="http://trial.6te.net/images/sulphur_S.gif"></img></center> 
 
      </td> 
 
      <td> 
 
       <center><img src="http://trial.6te.net/images/crystal_S.gif"></img></center> 
 
      </td> 
 
      <td> 
 
       <center><img src="http://trial.6te.net/images/gems_S.gif"></img></center> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="text" id="gold_" name="Gold" class="bigger"> 
 
      </td> 
 
      <td> 
 
       <input type="text" id="wood_" name="Wood" class="smaller" value="0"> 
 
      </td> 
 
      <td> 
 
       <input type="text" id="ore_" name="Ore" class="smaller" value="0"> 
 
      </td> 
 
      <td> 
 
       <input type="text" id="mercury_" name="Mercury" class="smaller" value="0"> 
 
      </td> 
 
      <td> 
 
       <input type="text" id="sulphur_" name="Sulphur" class="smaller" value="0"> 
 
      </td> 
 
      <td> 
 
       <input type="text" id="crystals_" name="Crystals" class="smaller" value="0"> 
 
      </td> 
 
      <td> 
 
       <input type="text" id="gems_" name="Gems" class="smaller" value="0"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       Durability :<br> 
 
       <input type="text" id="currDura_" name="Current_Durability" class="smaller">/
 
      </td> 
 
      <td> 
 
       <input type="text" id="maxDura_" name="Maximum_Durability" class="smaller"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       Repair Cost :<br> 
 
       <input type="text" id="repCost_" name="Repair_Cost" class="bigger"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       Smith Efficiency :<br> 
 
       <input type="text" id="smithEffi_" name="Smith_Efficiency" class="smaller"> 
 
      </td> 
 
      <td> 
 
       Smith Charges :<br> 
 
       <input type="text" id="smithCharge_" name="Smith_Charge" class="smaller"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="7"> 
 
       <center><input type="button" value="Calculate" name="Calc_Button" onclick="cpbCalc()" class="button_is"></center> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="7"> 
 
       <label id="result_"></label> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</div>

0

Sie müssen ersetzt werden:

document.getElementById("result_").value = eval(minCPB) + " gold at 0/"+ eval(optDura); 

mit:

document.getElementById("result_").innerHTML = eval(minCPB) + " gold at 0/"+ eval(optDura); 

Der Tag einen "Wert" Ausprägungs does't haben. Deshalb funktioniert es nicht, aber Sie haben keine Fehler.

0

können Sie

verwenden Wenn der Wert oder nicht

0

retruned Der Debugger ist dein Freund.

Ein paar Dinge:

Erstens, wenn Sie einen Wert aus einem Eingabefeld gelesen, die Sie als Zahl in Ihrem Skript verwenden möchten, müssen Sie es auf eine Zahl konvertieren. Zum Beispiel:

currDura = document.getElementById("currDura_").value; 

sollten sein:

currDura = parseInt(document.getElementById("currDura_").value); 

In Produktionscode dies muss auch Fehler durchzuführen Überprüfung (Benutzer nicht-numerische Werte kann eingeben), aber dies ist für die Prüfung in Ordnung.

Ich sehe, dass Sie einige der Werte später im Code analysieren, aber Sie verwenden auch einige von ihnen, bevor Sie in Zahlen konvertieren (z. B. `se = smithEffi/100 ').

Zweitens sollten Sie wirklich vermeiden, eval zu verwenden. Wenn Sie die Eingabewerte in Zahlen umgewandelt haben, sollte dies nicht notwendig sein.

Schließlich ist value nicht die richtige Eigenschaft des Etiketts. Meine Empfehlung ist, jQuery zu verwenden, und weisen Sie den Inhalt wie folgt:

$('#result_').text('text to show in label'); 

Sie die innerHTML Eigenschaft verwenden können, aber ich dies in der Regel nicht empfehlen, weil Sie mit Codierung des Textes beschäftigen müssen können.

Sie können Text mit reinem JavaScript zuweisen, aber es ist aufgrund möglicher browserübergreifender Probleme ein wenig komplizierter. Beispiele hierzu finden Sie unter Cross-browser innerText for setting values.