jqueryの置き換えについて
jsで作った電卓をjqueryに置き換えしなくてはいけなくなったのですが、
jqueryは習ってる最中で何がなんやら書き換えがうまくできません。
jqueryの導入の仕方や基本的な書き方はわかるのですが、書き換えると何かしら必ず定義されていないなどエラーが出てしまいます。ｊｓで書いたものはちゃんと動いていたのにjqueryに書き換えると微動だにしません。
書き換え後のコードを頂けたら幸いです。
html
<body class="body1">
<div class="calculator">
<div id="display" value="0">0</div>
<div class="commands">
<div class="command is-2col" onclick="calc_func(this)" value="clear">clear</div>
<div class="command empty"></div>
<div class="command is-operator" onclick="calc_func(this)" value="/">÷</div>
<div class="command" onclick="calc_func(this)" value="7">7</div>
<div class="command" onclick="calc_func(this)" value="8">8</div>
<div class="command" onclick="calc_func(this)" value="9">9</div>
<div class="command is-operator" onclick="calc_func(this)" value="*">×</div>
<div class="command" onclick="calc_func(this)" value="4">4</div>
<div class="command" onclick="calc_func(this)" value="5">5</div>
<div class="command" onclick="calc_func(this)" value="6">6</div>
<div class="command is-operator" onclick="calc_func(this)" value="-">-</div>
<div class="command" onclick="calc_func(this)" value="1">1</div>
<div class="command" onclick="calc_func(this)" value="2">2</div>
<div class="command" onclick="calc_func(this)" value="3">3</div>
<div class="command is-operator" onclick="calc_func(this)" value="+">+</div>
<div class="command is-2col" onclick="calc_func(this)" value="00">00</div>
<div class="command" onclick="calc_func(this)" value="0">0</div>
<div class="command is-equal" onclick="calc_func(this)" value="=">=</div>
</div>
</div>
<body>
js
function calc_func(button) { //
console.log(button);
var display = document.getElementById("display");//id名 displayの要素を取得 変数displayに代入
var button_value = button.innerHTML; //button_valueの変数に、buttonの中身を取得
console.log(button_value)
if (button_value === "clear") { //押したのがclearなら、displayの中身がinnerHTMLで０に変わる
display.innerHTML = "0";
}else if (button_value === "=") { //押したのが＝なら、displayの中身をnew funcで計算して値を返す
var replace_value = display.innerHTML.replaceAll("×", "*").replaceAll("÷", "/"); //replaceAllは("対象の文字列","置き換えする文字列")で文字を置き換えできる
display.innerHTML = (new Function ("return " + replace_value))(); //押されたキーの内容を判別せず、単純にそのまま文字列として記憶して、計算時に、そのまま文字列の計算結果を返すようにreturnの文字列を付け加える
}else if (display.innerHTML === "0" || display.innerHTML === "00") {
if (!isNaN(button_value) || button_value === "-") {
display.innerHTML = button_value;
}
}else {
if (isNaN(button_value)) {
var migihashi = display.innerHTML.slice(-1);
if (!isNaN(migihashi)) {
display.innerHTML += button_value;
}
}else {
display.innerHTML += button_value; //それ以外の動き +=はdisplay.innerHTML＝display.innerHTML＋button_valueの略し
}
}
}
css
.calculator {
width: 205px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
margin: auto;
}
#display {
width: 205px;
background: #5b5b5b;
text-align: right;
border: 1px solid #000;
box-sizing: border-box;
color: #fff;
font-size: 25px;
padding: 5px 10px;
}
.display.flashing {
animation-name: flash;
animation-duration: 0.1s;
}
@keyframes flash {
0% {
color: #5b5b5b;
}
90% {
color: #5b5b5b;
}
100% {
color: #fff;
}
}
.commands {
width: 204px;
background: #000;
display: flex;
flex-wrap: wrap;
padding-left: 1px;
}
.command {
width: 50px;
height: 45px;
background: #ddd;
margin: 0 1px 1px 0;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
font-size: 18px;
}
.command.is-operator,
.command.is-equal {
background: orange;
color: #fff;
}
.command.is-2col {
width: 101px;
}
.command:active {
background: #bbb;
}
.command.is-operator:active,
.command.is-equal:active {
background: #d37e00;
}
.command.empty:active {
background: #ddd;
}
#debug {
display: none;
}
お礼
ありがとうございます。。 前後の文脈は都合により開示できないのですが・・・ 文脈的には、「Ａの値が正のときはＢが０になる。Ａがmaximally positiveなので、Ｂは常に０である」的な感じなのですが。。 ところで、「maximally positive」という表現って最大値をあらわすときに本当に一般的なのですか？googleで検索するとたったの１１０件しかヒットしないんですけど・・・ （たとえばmaximum valueだと５０万件ヒットします） ヒットしたそれぞれの中身を見ても意味がわからないのがつらいですが・・・ でも辞書に（英英とかいろいろ見たんですが・・）最大限にとかしか書いてないからには、そう訳すのが正解なのでしょうかね・・・