2016-10-15 5 views
1

ボタンをクリックすると、calc.jsファイルからclear()ファンクションが呼び出され、「disp」とマークされたテーブルのセルのinnerHTML80085に設定されているドキュメントを作成しました。それは私が思ったようにうまくいかない。それはなぜ機能しないのですか?以下は私のコードです。JavaScriptのボタンがクリックできないのはなぜですか?

function clear() { 
 
    var disp = document.getElementById('disp'); 
 
    disp.innerHTML = "80085"; 
 
} 
 

 
//function number('s') { 
 
// 
 
//} 
 
//the number function has yet to be implemented
table { 
 
    border-collapse: collapse; 
 
} 
 

 
#display { 
 
    background-color: lightgray; 
 
} 
 

 
button { 
 
    width: 100%; 
 
    background-color: white; 
 
    border: 1px solid #008CBA; 
 
    border-radius: 2px; 
 
    transition-duration: 0.1s; 
 
} 
 

 
button:hover { 
 
    background-color: #008CBA; 
 
    color: white; 
 
} 
 

 
button:active { 
 
    background-color: #007ea7; 
 
    border: 1px solid #007ea7; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script src="calc.js" type="text/javascript"></script> 
 
    <link href="calc.css" rel="stylesheet" type="text/css" /> 
 
    <meta charset="utf-8"> 
 
    <title>Simple Calculator</title> 
 
    </head> 
 

 
    <body> 
 
    <table> 
 
     <tr> 
 
     <td colspan="3" id="disp">0</td> 
 
     <td><button onclick="clear();">CLR</button></td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><button onclick="number("7");">7</button></td> 
 
     <td><button onclick="number("8");">8</button></td> 
 
     <td><button onclick="number("9");">9</button></td> 
 
     <td><button onclick="">/</button></td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><button onclick="number("4");">4</button></td> 
 
     <td><button onclick="number("5");">5</button></td> 
 
     <td><button onclick="number("6");">6</button></td> 
 
     <td><button onclick="">*</button></td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><button onclick="number("1");">1</button></td> 
 
     <td><button onclick="number("2");">2</button></td> 
 
     <td><button onclick="number("3");">3</button></td> 
 
     <td><button onclick="">-</button></td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><button onclick="number("7");">0</button></td> 
 
     <td><button onclick="">.</button></td> 
 
     <td><button onclick="">=</button></td> 
 
     <td><button onclick="">+</button></td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 

 
</html>

すべてとHEPをいただければ幸いですいや!

+0

エラーが発生した場合は、ウェブコンソールでチェックしてください。 – scaisEdge

+1

[Javascriptで予約語がクリアされていますか?](http://stackoverflow.com/questions/7165570/is-clear-a- JavaScriptの予約語) – Frxstrem

+0

他のユーザーが指しているようにclearは予約語なので、あなたの関数のために他のものに変更することもできます....注:onclickの関数をdouble引用符でも呼び出していますさらなる問題を引き起こすので、onclick = "number( '7')"のようなものを試してください。 – RohitS

答えて

1

Working fiddle

まず、clearの代わりに別の名前を使用する必要があります。Is “clear” a reserved word in Javascript?を確認してください。あなたはHERE、例えばに気づく可能性があるので、あなたがonclick()イベントを添付するとき

第二に、あなたは正確にすべてのthebuttonであなたのHTMLコード内の引用符のconflitを修正する必要があります。

<td><button onclick="number("7");">7</button></td> 
_____________________^______^_^__^ 

ではなく、単一引用符を使用してみてください:

<td><button onclick="number('7');">7</button></td> 
____________________^____________^ 

これが役に立ちます。

+2

数値関数呼び出しで良い発見!私はそれを逃しました、なぜ誰かがdownvotedなぜこれはOPがラインの下でさらに遭遇する問題を指摘しているか分からない。私はonclickの二重引用符に固執し、関数の引数には一重引用符を使用します。動的データを使用する習慣があり、デフォルトではブラウザは属性の二重引用符を使用しますが、どちらも同じように動作します。将来の問題を防ぐため+1。 – NewToJS

+0

心配はありません..あなたの介入に感謝します(私の答えを更新しました)...特権を使う方法を知らない人が常にいます。 –

+0

非常に歓迎:)私たちは皆、ここで助けを求めたり、助けを求めたりします。 – NewToJS

0

onclick="number("1");"onclick="number('1');"に置き換えます.1は一重引用符で入力します。また、number('s')関数の宣言では、変数を一重引用符で囲みます。つまり、関数numberが呼び出されるたびに常に値sが考慮されるため、ここでは一重引用符を削除します。

関連する問題