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計算器未在輸入中評估

回答

相關問題