JavaScriptの計算機が入力で評価されていない

-1

私は自分の単純な短いJavaScript計算機を作ろうとしていますが、私は見つけたチュートリアルよりもアプローチが違っているようです。私はこの問題を考えるJavaScriptの計算機が入力で評価されていない

<!DOCTYPE html> 
<head> 
    <meta charset = 'utf-8'> 
</head> 

<html> 
<body> 
    <input name='x' onchange='this.value=eval(this.value)'> 
<br> 
<button>1</button> 
<button>2</button> 
<button>3</button> 
<br> 
<button>4</button> 
<button>5</button> 
<button>6</button> 
<br> 
<button>7</button> 
<button>8</button> 
<button>9</button> 
<br> 
<button>0</button> 
<button>.</button> 
<button>+</button> 
<br> 
<button>*</button> 
<button>/</button> 
<button id='enter'>=</button> 

<script> 
function el(x){return document.querySelector(x);} 
function els(x){return document.querySelectorAll(x);} 

var x=el("input"); 
function g(){x.value+=this.innerHTML;} 
var t = els("button"); 
    for(i=0;i<t.length;i++){ 
    t[i].onclick=g; 
}

はそれらの線ですが、私は、あなたは確かに問題があるまでフラグを立ててきた二行それ

el('#enter').onclick=x; 
    el("input").innerHTML=eval(t); 

</script> 
</body> 
</html>

出典

2017-04-08 Ralnor

さて、あなたは別のアプローチをとってきました。質問はなんですか？それは正しく動作していませんか？もしそうなら、*どのように*正しく動作していないのですか？あなたが期待していない結果を見ていますか？ –

'onclick'を' input'要素に設定するのはなぜですか？なぜ、 't'が要素の集合であるときに' innerHTML'を 'eval（t）'に設定するのでしょうか？ –

意味があるアプローチから始めます。ロジックは確かに表示されていないし、私たちはあなたのためにこのすべてを書くためにここにいません – charlietfl

を修正するかどうかはわかりません、彼らはしないでくださいまったく意味がありません。 onclickをHTMLInputElementに設定することはできません。また、要素コレクション（t）でevalを呼び出しても意味をなさない

それ以外の基本的なアプローチは健全です。 =ボタンのハンドラで、changeハンドラで行ったことと同じ処理を行うだけです。

function calcuate() { 
    x.value = eval(x.value); 
}

その後：あなたは彼らが同じことをしたいので、それらの両方が呼び出す関数内でそのロジックを置くこと変更に伴い

el('#enter').onclick = calcuate;

と

<input name="x" onchange="calcuate();">

を、それはです罰金：

function el(x) { 
 
    return document.querySelector(x); 
 
} 
 

 
function els(x) { 
 
    return document.querySelectorAll(x); 
 
} 
 

 
var x = el("input"); 
 

 
function g() { 
 
    x.value += this.innerHTML; 
 
} 
 
var t = els("button"); 
 
for (i = 0; i < t.length; i++) { 
 
    t[i].onclick = g; 
 
} 
 

 
function calculate() { 
 
    x.value = eval(x.value); 
 
} 
 

 
el('#enter').onclick = calculate;

<input name='x' onchange="calculate();"> 
 
<br> 
 
<button>1</button> 
 
<button>2</button> 
 
<button>3</button> 
 
<br> 
 
<button>4</button> 
 
<button>5</button> 
 
<button>6</button> 
 
<br> 
 
<button>7</button> 
 
<button>8</button> 
 
<button>9</button> 
 
<br> 
 
<button>0</button> 
 
<button>.</button> 
 
<button>+</button> 
 
<br> 
 
<button>*</button> 
 
<button>/</button> 
 
<button id='enter'>=</button>

onxyzスタイルプロパティを設定するにonxyz属性形式のイベントハンドラを使用して動作しますが、ベストプラクティスではない、と述べました。これらの属性では、関数がグローバルであることが必要です（グローバルはBad Thing™です）。プロパティーには問題はありませんが、イベントに対応する単一のハンドラーのみが要素にアタッチされます。代わりにaddEventListenerを使用して見てください。

サイドノート：あなたは、彼らは形式ではないだからあなたのbutton要素と罰金だが、buttonため驚くべきデフォルトtypeがsubmitであることを注意してください。したがって、<button>X</button>がフォームを送信します。ボタンがほしいだけでフォームにある場合は、<button type="button">X</button>が必要です。

出典

2017-04-08 16:01:09

JavaScriptの計算機が入力で評価されていない

答えて

関連する問題