Second inputs onclick() function doesn't work

Question

There were similar questions, but not exactly what I'm looking for. I have a filter for my table with 1 button that changes the value of a textbox to the currant date. That works fine, but right next to it, theres a button to clear the content in the textbox. This second button doesnt seem to work.

My code :

function today() {

  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var mm = String(today.getMonth() + 1).padStart(2, '0');
  var yyyy = today.getFullYear();

  today = yyyy + '.' + mm + '.' + dd;

  document.getElementById("myInput").value = today;
}

function clear() {

  document.getElementById("myInput").value = "";
}

<div class="form-inline">
  <label for="myInput">Filter By:</label>
  <input class="input-xsmall" type="text" maxlength="10" placeholder="yyyy.mm.dd" id="myInput" style="width: 100px; margin-bottom: 10px; display: inline-block">
  <input type="button" value="Today" onclick="today()">
  <input type="button" value="Clear" onclick="clear()">

</div>

Not sure how to get it to work. When I switched the onclick function in the first input as clear() it worked so for some reason the second input button doesnt work. How can I fix that?

See [this](https://stackoverflow.com/questions/61664663/javascript-function-falling-out-of-scope-x-is-not-a-function-x-is-a/61665146#61665146) — Teemu, May 13 '20 at 11:52
@Teemu turns out I named it wrong. about the link you posted, is `(action)` an in built function? haven't seen a code of that sort before — Hisham Bawa, May 13 '20 at 12:03
No, `action` is not a function, it's the property reflecting the action attribute of a form. Similarly in your case, `clear` is a method of form elements, and it shadows your global `clear` function. I'm just wondering, why the clear method was never called, I would had expected it to clear the form ... — Teemu, May 13 '20 at 12:06
oh. thank you. i'll keep that in my mind if i need it in the future :) — Hisham Bawa, May 13 '20 at 12:07
Or if you don't have a form, it looks like Mahesvirus has linked to the correct answer explaining what is going on on your code. — Teemu, May 13 '20 at 12:08
yeah. i do have a form but its below this code so Mahesvirus's answer works well — Hisham Bawa, May 13 '20 at 12:10
Yep, the anwer to my question, why the method didn't do anything, is explained at [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/clear) "_In recent versions of Mozilla-based applications, as well as in Internet Explorer and Netscape 4, [clear()] does nothing_" — Teemu, May 13 '20 at 12:21
right. thanks for that info as well :) was super confused because it didnt even throw an error — Hisham Bawa, May 13 '20 at 12:24

score 2 · Accepted Answer · answered May 13 '20 at 11:58

2

Try to change the name of that clear() function. And also consider looking into event handlers.

answered May 13 '20 at 11:58

Yakko Majuri

448
3
13

this did the trick. thanks. I guess `clear()` was a reserved name or something of that sort? – Hisham Bawa May 13 '20 at 12:00
thanks again man. that completely went over my head. I need to be more careful naming these lol. prob the second time now :/ – Hisham Bawa May 13 '20 at 12:02
No problem at all! – Yakko Majuri May 13 '20 at 12:06

score 1 · Answer 2 · answered May 13 '20 at 11:59

1

You need to change the js function name from clear() to something else. Because clear() is a javascript built in function/method. Javascript Clear fields Function Not Working?

answered May 13 '20 at 11:59

kokila

294
2
8

thanks buddy. that part completely went over my head – Hisham Bawa May 13 '20 at 12:01

Maheshvirus · Answer 3 · 2020-05-13T12:10:14.043

1

clear is not a reserved keyword. It is a scope problem

But still if you want to use same function name. can try below code.

Changing your existing function onClick="clear()" to window.clear() can fix your issue.

Refer this Ans

<input type="button" value="clear" onclick="window.clear()">

edited May 13 '20 at 12:10

answered May 13 '20 at 12:06

Maheshvirus

6,749
2
38
40

wow i forgot about `windows.clear()` as well. thanks man! this does the job without additional JS – Hisham Bawa May 13 '20 at 12:09

Baruch Gans · Answer 4 · 2020-05-13T12:17:08.040

1

Unlike what is written here, clear is not a word reserved in js.

Here is the list of reserved words(from s3 site)

Felix Kling Explained here, why sometimes it acts as a reserved word

edited May 13 '20 at 12:17

answered May 13 '20 at 12:10

Baruch Gans

1,415
1
10
21

1

thanks. this should help me for some stuff in the future. cheers – Hisham Bawa May 13 '20 at 12:14

score 0 · Answer 5 · answered May 13 '20 at 13:27

0

Or just add an event listener instead

document.querySelector("[type='button'][value='Clear']").addEventListener("click", clear);

answered May 13 '20 at 13:27

Saadi Toumi Fouad

2,779
2
5
18

Second inputs onclick() function doesn't work

5 Answers5