Сбросить все данные с экрана калькулятора

Question

Я работаю с файлами .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 формы, особенно с ввод тег. Тем не менее, он не работает с элементами, такими как div или span, даже если есть части html-формы.

Answer 1

Точно. 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>

Answer 2

div элемент не известен в качестве действительного поля ввода для формы. Если вы хотите очистить содержимое своего div, вам просто нужно передать пустую строку в свой внутреннийHTML.

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

Однако, я рекомендую использовать поле ввода, как это:

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

Вы можете получить доступ к его значение с

document.getElementById('screen').value