重置計算器屏幕上的所有數據

我正在努力製作一個網頁計算器.php和.html文件。到目前爲止，除了重置按鈕外，一切正常。單擊我希望看到從所有數據清除屏幕，但它不會這樣做。標記以下結構：重置計算器屏幕上的所有數據

<form id="myCalculator"> 
<div id="screen"></div> 
    <input type="button" onclick="screenZero()" value="0"> 
    <input type="button" onclick="screenOne()" value="1"> 
    <input type="button" onclick="myFunction()" value="Reset"> 
</form>

...和JavaScript：

function screenOne() { 
var one = 1; 
document.getElementById("screen").innerHTML += "1"; 
} 

function screenZero() { 
var zero = 0; 
document.getElementById("screen").innerHTML += "0"; 
} 

function myFunction() { 
document.getElementById("myCalculator").reset(); 
}

當復位按鈕，點擊屏幕上仍顯示數據，而不是將其清除。有關如何使其正常工作的任何想法？

我注意到document.getElementById（）。reset（）;完美搭配html表格，尤其是輸入標籤。但是，即使存在部分html表單，它也不適用於像div或跨度爲的元素。

來源

2016-10-30 John Greg

的div和跨度訪問它的價值並不構成元素。 – mplungjan

是的，你是對的！我將其改爲輸入，但此時出現錯誤並嘗試解決該問題。 –

正確。 reset不能在div元素上工作，但這樣會：

document.getElementById("screen").innerHTML = "";

function screenOne() { 
 
document.getElementById("screen").innerHTML += "1"; 
 
} 
 

 
function screenZero() { 
 
document.getElementById("screen").innerHTML += "0"; 
 
} 
 

 
function myFunction() { 
 
document.getElementById("screen").innerHTML = ""; 
 
}

<div id="screen"></div> 
 
<input type="button" onclick="screenZero()" value="0"> 
 
<input type="button" onclick="screenOne()" value="1"> 
 
<input type="button" onclick="myFunction()" value="Reset">

我不知道爲什麼你要創建的每一個button功能......這是沒有辦法的辦法我們應該編程。
重用您的function！

var screen = document.getElementById("screen"); 
 

 
function insert(v) { 
 
screen.insertAdjacentHTML("beforeend", v); 
 
} 
 

 
function resetCalc() { 
 
screen.innerHTML = ""; 
 
}

#screen{width:200px; height:2em; background:#eee; text-align: right;}

<div id="screen">110</div> 
 
<button onclick="insert(0)">0</button> 
 
<button onclick="insert(1)">1</button> 
 
<button onclick="resetCalc()">Reset</button>

另外，爲什麼使用<div id="result">？你可以用input去：

var screen = document.getElementById("screen"); 
 

 
function insert(v) { 
 
    screen.value = screen.value + v 
 
} 
 

 
function resetCalc() { 
 
    screen.value = ""; 
 
}

#screen{text-align:right;}

<input type="text" id="screen" value="" readonly> 
 
<button onclick="insert(0)">0</button> 
 
<button onclick="insert(1)">1</button> 
 
<button onclick="resetCalc()">Reset</button>

來源

2016-10-30 10:41:04

感謝您的提示！其實，它是完美的工作。然而，我試圖按照你的建議，特別是那些建議少輸入和重用的建議，但是當我點擊一個按鈕時，無論哪一個，我都被重定向到另一個頁面，即使我刪除了它所做的所有JavaScript代碼一樣的東西（！）。 –

@JohnGreg（這是因爲'

是的！ event.preventDefault（）;阻止提交。 –

一個div元素是不知道作爲一個形式的有效輸入字段。如果你想清除你的div的內容，你只需要將一個空字符串傳遞給它的innerHTML。

document.getElementById('screen').innerHTML = '';

不過，我建議使用一個輸入字段像這樣的：

<input type="number" id="screen" />

您可以

document.getElementById('screen').value

來源

2016-10-30 10:43:35

重置計算器屏幕上的所有數據

回答

相關問題