Question

我试图制作我自己的简单的简短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>

Answer 1

你标记的两条线肯定是个问题，根本没有任何意义。您无法将onclick设置为HTMLInputElement，并且对元素集合（eval）调用t没有任何意义。

除此之外，你的基本方法是合理的。您只需要=按钮上的处理程序执行与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元素没问题，因为它们不在表单中，但请注意type的令人惊讶的默认button是submit。因此<button>X</button>将提交表单。如果您只想要一个按钮并且它可能是一个表单，则需要<button type="button">X</button>。

Javascript计算器未在输入中进行评估

1 个答案: