0

I need to hide the file upload button after two clicks using javascript.

my HTML Code

<input type="file" runat="server"  id="fileInputDataCC" name="fileInputDataCC" />
<button type="submit" id="btnUpload" name="command" value="CompareCost" style=" color:#FFFFFF;border:none;" onclick="click();">CALCULATE MY USE</button>

i just try with following java script code but it's not working.

<script type="text/javascript">
 var clicks = 1;
 function click() {
        clicks += 1;
        document.getElementById("btnUpload").innerHTML = clicks;
        if( Clicks == 3)
         {
           document.getElementById("btnUpload").style.display = "none";
         }
       else
         {
           document.getElementById("btnUpload").style.display = "Block";
         }
    }
 </script>
ale
  • 10,012
  • 5
  • 40
  • 49
Gurunathan
  • 97
  • 4
  • 19

3 Answers3

2

In you if statement your clicks variable has a capital letter, that's why it's not working. You should also rename you function as mentioned in another answer by @Amitesh, because you can't have a 'click' function name. You can check this question for more detail: javascript function name cannot set as click?

<button type="submit" id="btnUpload" name="command" value="CompareCost" style=" color:#FFFFFF;border:none;" onclick="clickCount();">CALCULATE MY USE</button>
    <script type="text/javascript">
     var clicks = 1;
     function clickCount() {
            clicks += 1;
            document.getElementById("btnUpload").innerHTML = clicks;
            if(clicks == 3)
             {
               document.getElementById("btnUpload").style.display = "none";
             }
           else
             {
               document.getElementById("btnUpload").style.display = "Block";
             }
        }
     </script>
Community
  • 1
  • 1
Vsevolod Goloviznin
  • 12,074
  • 1
  • 49
  • 50
1

your html:

<button type="submit" onclick="count_clicks(this);">CALCULATE MY USE</button>

and your js :

var clicks = 0;
function count_clicks(button) {
    clicks++;
    if (clicks == 2) {
        button.style.display = 'none';
    }
}
Konstantin
  • 3,294
  • 21
  • 23
1

The problem with your script is that you are trying to use inbuilt HTML dom method: 'click'.
Please change your function name to something else.

Note that dom events are not raised by JavaScript. We just attach our listener.
In your case "onclick="...."" just instruct dom to fire the handler whenever such event occurs and it turns out to be inbuilt 'click' method. Since at this time 'this' would refer to global window object, the 'click' handler associated with window will be invoked. Since there is no 'window.onclick' nothing will happen.

<p onclick="click()">click me</p>//onclick event will be a reference to the global (window) object.

function click(){
   alert('click method will never be called');
}
window.onclick = function(){//
  alert('window onclick handler - click method not executed');
}
Amitesh
  • 1,507
  • 1
  • 11
  • 19