Кнопка не вызывает функцию

Question

Я пишу код для простого калькулятора. Большинство моих кнопок, похоже, работают и правильно вызывают функции, но по какой-то причине моя ясная функция не вызывается. 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> 

кнопка с надписью «С» должен вызвать мою функцию «ясно()», но Событие «onclick» никогда не возникает. Есть хороший шанс, что есть только одна опечатка, которую я слишком неопытен, чтобы найти. Любая помощь приветствуется.

Answer 1

Вы столкнулись с неясным причудом JavaScript, который возникает, когда вы используете встроенные обработчики событий с использованием заданной функции с именем clear(). Существует функция document.clear(), которая в контексте встроенного JavaScript сначала попадает в цепочку видимости, поэтому это вызвано вашим вызовом clear(), а не вашей глобальной функцией window.clear().

Вы можете это подтвердить, заменив ваш звонок clear()alert(clear === document.clear);, который alerts true.

Вы можете решить эту проблему, либо явно присвоив вызов, т. Е. window.clear() вместо clear(), либо переименовав функцию. Но следует упомянуть, что вы должны заглянуть в замену обработчиков событий inline обработкой обработчика событий JavaScript, что считается предпочтительным, поскольку оно более эффективно отделяет представление от логики.

См. Is "clear" a reserved word in Javascript?.

Answer 2

Встроенный обработчик onclick ожидает, что функция будет загружена до ее установки. Я предполагаю, что вы загружаете html перед js. Если нет, то ожидает, что функция будет частью глобального объекта, который является окном.

Попробуйте assinging вашей функции как это:

window.addChar = function addChar(char) { ... }; 

Это часто лучше назначать обработчик кликов, используя метод addEventListener.

Answer 3

Рабочий раствор: http://jsfiddle.net/b9h7L3av/

переименование четкой функции() будет все необходимые.

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