重置计算器屏幕上的所有数据

我正在努力制作一个网页计算器.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

重置计算器屏幕上的所有数据

回答

相关问题