0
この質問は以前に尋ねられましたが、私はそれらのすべてを読んで、与えられた提案を実装しようとしましたが運はありませんでした。基本的な機能を備えた電卓です。 番号が画面に表示されていないため、オペレータが動作していません。基本的に、jsファイルは機能しません。コードはJsBinで動作しますが、他のブラウザでは動作しません
- スコープの問題。挿入されたjsファイルはwindow.onload=function(){}です。
- バグを見つけようとしましたが、コードは大丈夫です。
私はcssファイルとjsファイルを別々にリンクしています。コードはJsBinでは動作しますが、ブラウザでは動作しません。
任意の提案：
ここでは私のコードです：
<!DOCTYPE html>
<html>
<head>
<title> Basic Calculator </title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="container">
<form name="calculator">
<input type="text" id="display" />
<br>
<input type="button" value=' CLEAR ' class="operator" onclick='clearDisplay("clear")' />
<input type="button" value=' DEL ' class="keys" onclick='backSpace()' />
<input type="button" value=' + ' class="keys" onclick='passToScreen("+")' />
<br />
<input type="button" value=' 9 ' class="keys" onclick='passToScreen("9")' />
<input type="button" value=' 8 ' class="keys" onclick='passToScreen("8")' />
<input type="button" value=' 7 ' class="keys" onclick='passToScreen("7")' />
<input type="button" value=' - ' class="keys" onclick='passToScreen("-")' />
<br />
<input type="button" value=' 6 ' class="keys" onclick='passToScreen("6")' />
<input type="button" value=' 5 ' class="keys" onclick='passToScreen("5")' />
<input type="button" value=' 4 ' class="keys" onclick='passToScreen("4")' />
<input type="button" value=' * ' class="keys" onclick='passToScreen("*")' />
<br />
<input type="button" value=' 3 ' class="keys" onclick='passToScreen("3")' />
<input type="button" value=' 2 ' class="keys" onclick='passToScreen("2")' />
<input type="button" value=' 1 ' class="keys" onclick='passToScreen("1")' />
<input type="button" value='/' class="keys" onclick='passToScreen("/")' />
<br />
<input type="button" value=' 0 ' class="keys" onclick='passToScreen("0")' />
<input type="button" value=' . ' class="keys" onclick='passToScreen(".")' />
<input type="button" value=' = ' class="operator" onclick='doMath()' />
<br />
</form>
</div>
</body>
</html>
CSSコード：
body {
background-color: lightgrey;
}
#container {
position: relative;
width: 300px;
height: 320px;
border: 2px solid blue;
border-radius: 4px;
background-color: white;
padding: 20px;
margin: 50px auto;
box-shadow: 3px 2px 2px 1px lightblue;
}
input[type=button] {
background: lightgrey;
width: 20%;
font-size: 20px;
font-weight: 900;
font: white;
margin: 2%;
border-radius: 4px;
box-shadow: 0px 0px 2px 1px black;
outline: none;
}
#container .operator {
width: 45%;
}
input[type=text] {
position: relative;
display: block;
height: 40px;
width: 93%;
border: 2px solid black;
border-radius: 5px;
box-shadow: 0px 0px 1px black;
margin: 5px 5px -2px 5px;
text-align: right;
outline: none;
font-size: 25px;
font-weight: bold;
padding-right: 5px;
}
JSファイル：
window.onload = function() {
var screen = document.getElementById("display");
function passToScreen(x) {
screen.value += x;
}
function clearDisplay() {
screen.value = "";
}
function doMath() {
var y = screen.value;
y = eval(y);
screen.value = y;
}
function backSpace() {
var elem = screen.value;
var newElem = elem.slice(0, elem.length - 1);
screen.value = newElem;
}
}
ありがとうございました。
乾杯@ティヨール。
のようなウィンドウオブジェクトに機能を追加する必要があります。エラーメッセージはありますか？ –
jsファイルが動作していません – Tiyor