按钮不是调用函数

时间:2015-07-03 23:32:33

标签: javascript button onclick calculator

我正在为一个简单的计算器编写代码。我的大多数按钮似乎正在工作并正确调用函数,但由于某些原因,我的明确函数没有被调用。我的按钮和输入栏的HTML是:

<p id="input" style="border:1px solid black" style="width:100px"><br></p>
<table>
    <tr>
        <td><button style="width:100%">m+</button></td>
        <td><button style="width:100%">m-</button></td> 
        <td><button style="width:100%">mc</button></td>
        <td><button style="width:100%" onclick='memory("mr")'>mr</button></td>
        <td><button onclick="clear()" style="width:100%">c</button></td>
    </tr>
    <tr>
        <td><button onclick="addChar('7')" style="width:100%">7</button></td>
        <td><button onclick="addChar('8')" style="width:100%">8</button></td>   
        <td><button onclick="addChar('9')" style="width:100%">9</button></td>
        <td><button onclick="setOperator('/')" colspan="2" style="width:200%">/</button></td>
    </tr>
    <tr>
        <td><button onclick="addChar('4')" style="width:100%">4</button></td>
        <td><button onclick="addChar('5')" style="width:100%">5</button></td>       
        <td><button onclick="addChar('6')" style="width:100%">6</button></td>
        <td><button onclick="setOperator('*')" colspan="2" style="width:200%">*</button></td>
    </tr>
    <tr>
        <td><button onclick="addChar('1')" style="width:100%">1</button></td>
        <td><button onclick="addChar('2')" style="width:100%">2</button></td>   
        <td><button onclick="addChar('3')" style="width:100%">3</button></td>
        <td><button onclick="setOperator('-')" colspan="2" style="width:200%">-</button></td>
    </tr>
    <tr>
        <td><button style="width:100%">+/-</button></td>
        <td><button onclick="addChar('0')" style="width:100%">0</button></td>
        <td><button onclick="addChar('.')" style="width:100%">.</button></td>
        <td><button onclick="calculate()" style="width:100%">=</button></td>
        <td><button onclick="setOperator('+')" style="width:100%">+</button></td>
    </tr>
</table>

然后这些按钮调用各自的功能:

<script>
var str = "";
var operand1 = 0;
var operand2 = 0;
var op = "";
var mem = 0;
var input = document.getElementById("input");
function addChar(char) {
    str += char;
    input.innerHTML = str;
}
function clear() {
    str = "";
    input.innerHTML = "<br>";
}
function setOperator(operator) {
    op = operator;
    operand1 = str;
    str = "";
    input.innerHTML = "<br>";
}
function calculate() {
    operand2 = str;
    if (op === "+")
    {
        str = ((+operand1) * 10 + (+operand2) * 10)/10;
    }
    else if (op === "-")
    {
        str = (operand1 - operand2);
    }
    else if (op === "*")
    {
        str = (operand1 * operand2);
    }
    else if (op === "/")
    {
        str = (operand1 / operand2);
    }
    input.innerHTML = str;
}
</script>

标有&#34; c&#34;的按钮应该调用我的函数&#34; clear()&#34;,但是&#34; onclick&#34;事件似乎永远不会发生。我很有可能只有一些错误,我找不到经验。任何帮助表示赞赏。

3 个答案:

答案 0 :(得分:2)

工作解决方案:http://jsfiddle.net/b9h7L3av/

需要重命名clear()函数。

function clearAll() {
  str = "<br>";
  input.innerHTML = str;
}

答案 1 :(得分:0)

内联onclick处理程序期望在设置之前加载该函数。我假设你在js之前加载html。 如果没有,那么它希望该函数成为全局对象的一部分,即窗口。

尝试像这样分配你的功能:

addEventListener

使用var interstitialReady = false; // update the state when ad preloaded document.addEventListener('onAdLoaded', function(e){ if(e.adType == 'interstitial') { interstitialReady = true; } }); // when dismissed, preload one for next show document.addEventListener('onAdDismiss', function(e){ if(e.adType == 'interstitial') { interstitialReady = false; AdMob.prepareInterstitial({ adId:admobid.interstitial, autoShow:false }); } }); setInterval(function(){ if(interstitialReady) AdMob.showInterstitial(); }, 2*60*1000); // preload the first ad AdMob.prepareInterstitial({ adId:admobid.interstitial, autoShow:false }); 方法分配点击处理程序通常会更好。

答案 2 :(得分:0)

当您使用带有名为clear()的已使用定义函数的内联事件处理程序时,您会遇到一个模糊的JavaScript怪癖。有一个document.clear()函数,在内联JavaScript的上下文中,碰巧在作用域链中首先被调用,因此这是clear()调用所调用的函数,而不是全局window.clear()调用的函数。功能。

您可以将clear()来电替换为alert(clear === document.clear); alerts true来证明这一点。

您可以通过明确限定呼叫来解决问题,即window.clear()而不是clear(),或者重命名该功能。但是,应该提到的是,您应该考虑使用纯JavaScript事件处理程序注册来替换内联事件处理程序,这被认为是更好的,因为它更有效地将表示与逻辑分开。

请参阅Is "clear" a reserved word in Javascript?