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>
1
  • clicks in if condition should be compatible to your variable name Commented Nov 24, 2014 at 7:24

3 Answers 3

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>
Sign up to request clarification or add additional context in comments.

Comments

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');
}

3 Comments

click is not a global function, so it's ok to use this name
@VsevolodGoloviznin can you check the enhanced explaination? It will explain why using 'click' in this case will fail?
yep, you're right, I've added an update to my answer
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';
    }
}

1 Comment

fixed function name as per @Amitesh's comment

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.