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属性风格的事件处理程序的工作原理，但不是最好的做法。这些属性需要你的函数是全局的（而全局变量是一件坏事），虽然属性函数没有这个问题，但它们只允许事件的单个处理程序附加到元素上。改用addEventListener来代替。

旁注：你没事你button元素，因为它们的形式是没有，但要注意的是，奇怪默认type为button是submit。所以<button>X</button>将提交一份表格。如果你只是想要一个按钮，它可能是一种形式，你需要<button type="button">X</button>。

来源

2017-04-08 16:01:09

Javascript计算器未在输入中评估

回答

相关问题