Changing the content of an input via a button

Question

I am a beginner in programming and I am developing a mini calculator project in order to study. I decided to implement a erase button to clean the display, but I can’t make it work at all.

HTML part of the display

        <div class="visor">
            <input type="text" name="display" id="display">
            <input type="button" value="C" class='clear'id='clear' onclick="clear()">
        </div>

part of the JS

function clear() { document.getElementById('display').value = ' '; }

i ultilized this same approach to write the number on the display and it works perfectly, but to delete no, how can I be solving this?

Answer 1

I believe it’s because clear is a reserved word. See that exchanging clear() for clearx() works.

function clearx() { 
	document.getElementById('display').value = ''; 
}

<div class="visor">
	<input type="text" name="display" id="display">
	<input type="button" value="C" class='clear' id="clear" onclick="clearx()">
</div>

Behold Set.prototype.clear() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear

---

TIP

Maybe that’s not the best option for your case, but you can use a input of the kind reset to clear the form. If you change the div for form and put in a input type="reset" when you click on it it clears all the input within the form

<form class="visor">
	<input type="text" name="display" id="display">
	<input type="reset" value="C">
</form>