输入类型按钮不内联调用onclick函数

【问题标题】：Input type button does not call the onclick function inline输入类型按钮不内联调用onclick函数
【发布时间】：2016-10-03 11:42:00
【问题描述】：

我正在为一个游戏制作一个计算器，并制作了一个这样的按钮：

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

单击按钮时，我想运行cpbCalc() 函数。
您可以在 http://trial.6te.net/Calculators/cpbCalculatorNew.html 上找到此 html 代码

这里是完整的 html 代码：

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

这里的“result_”是我想提供最终答案的标签。
当我单击按钮时，它应该运行函数“cpbCalc()”但它没有。

相反，它什么也不做。
此外，当我检查控制台时，它没有显示任何错误。 您能帮我解释一下为什么会发生这种情况并提供解决方案吗？

【问题讨论】：

  • 为什么你的脚本块中有一个 html 注释？使用 eval 是个坏主意。 &lt;center&gt; 是一个已弃用的标签。

标签： javascript html


【解决方案1】：

您的脚本中有一些拼写错误：

  • 永远不要使用 eval：这是一种威胁，主要是你不需要它
  • 将文本值转换为数字的一种方法是在值前面添加 + 像 +document.getElementById("currDura_").value
  • 避免像 totDura 那样被零除。一种方法可以是： (totDura == 0) ？ 1 : totDura)
  • 使用textContent而不是value属性来改变标签文本

sn-p：

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>

【讨论】：

    【解决方案2】：

    你必须替换：

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

    与：

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

    标签没有“价值”属性。这就是为什么它不起作用但您没有错误的原因。

    【讨论】：

      【解决方案3】：

      你可以使用

      该值是否会被重传

      【讨论】：

        【解决方案4】：

        调试器是你的朋友。

        几件事：

        首先，当您从输入框中读取要在脚本中用作数字的值时，您需要将其转换为数字。例如：

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

        应该是：

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

        在生产代码中，这也需要执行错误检查（用户可以输入非数字值），但这对于测试来说很好。

        我看到您稍后会在代码中解析一些值，但您也在转换为数字之前使用其中一些值（例如，`se = smithEffi / 100'）。

        其次，你真的应该避免使用eval。如果您已将输入值转换为数字，则不需要这样做。

        最后，value 不是标签的正确属性。我的建议是使用 jQuery 并像这样分配内容：

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

        您可以使用innerHTML 属性，但我通常不建议这样做，因为您可能需要处理文本编码。

        您可以使用纯 JavaScript 分配文本，但由于潜在的跨浏览器问题，它会涉及更多内容。有关如何执行此操作的一些示例，请参阅 Cross-browser innerText for setting values。

        【讨论】：

          猜你喜欢
          • 2015-05-14
          • 2014-03-29
          • 2014-12-22
          • 1970-01-01
          • 2020-09-28
          • 2015-04-18
          • 1970-01-01
          • 2021-09-20
          • 1970-01-01
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode