button onclick wont call the javascript function

Question

I am calling a function on a button click. But the function is not getting called. I dont know what I am doing wrong. Please help.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
    function clear() {
      document.getElementById('inp').value = "";
    }
  </script>
</head>

<body>
  <input type="text" id="inp" name="">
  <input type="button" onclick="clear()">
</body>
</html>

@NewbeeDev no its not. It just call `document.clear` instead. I have shared a reference link in my answer. You can check it — Rajesh, Sep 21 '16 at 05:57

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

clear is not a reserved word but its calling document.clear instead. Try updating name of function

Sample

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
    function clear1() {
      document.getElementById('inp').value = "";
    }
  </script>
</head>

<body>
  <input type="text" id="inp" name="">
  <input type="button" onclick="clear1()">
</body>
</html>

Sample - Override document.clear

Note: its a bad practice to override document/window/prototype functions. This is just for demonstration purpose.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
    function clear1() {
      document.getElementById('inp').value = "";
    }
    document.clear = function(){
      console.log('My clear function')
    }
  </script>
</head>

<body>
  <input type="text" id="inp" name="">
  <input type="button" onclick="clear()">
</body>
</html>

Reference

Is “clear” a reserved word in Javascript?

score 0 · Answer 2 · answered Sep 21 '16 at 05:56

0

Change the function name because clear function make that issue. make the function name clearInput or what ever you convenient

answered Sep 21 '16 at 05:56

Noni

369
2
14

score 0 · Answer 3 · answered Sep 21 '16 at 05:58

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
    function clearTxtBox() {
      document.getElementById('inp').value = "";
    }
  </script>
</head>

<body>
  <input type="text" id="inp" name="">
  <input type="button" onclick="clearTxtBox()">
</body>
</html>

Just change your function name and it will work.

button onclick wont call the javascript function

3 Answers3

Sample

Sample - Override document.clear

Reference