CODEWITHSUNDEEP
javascripthtml
Barlet
Barlet

Reputation: 555

button doesn't dissapear onClick (JavaScript)

I have the following code for making the button not visible and it works for a second and then button comes again. The links on navigates on the same page I have tried "return false;" but then my navigation doesn't work.

What to do for keeping the button hidden?

JavaScript

function btn_hide(){

    document.getElementById("btn_shfaqe").style.display="none";
}

html

<a href="?tip=fin&vid_id=0" onClick="btn_hide();">test1</a>

Upvotes: 1

Views: 116

Answers (5)

Niklas
Niklas

Reputation: 13155

You have to do two things; Return the function and return false, like this:

javascript

function btn_hide(){

    document.getElementById("btn_shfaqe").style.display="none";
    return false;
}

html

<a href="?tip=fin&vid_id=0" onClick="return btn_hide();">test1</a>

Here's a DEMO

EDIT according to comment
You are better off hiding the button serverside, but if you really want to use javascript you can do this on page load:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

window.onload = function() {
    var vid_id = getParameterByName('vid_id');
    if (vid_id == 0 || vid_id == 5) {
        document.getElementById("btn_shfaqe").style.display="none";
    }
}

Upvotes: 2

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

Please try with thw below code snippet.

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
            return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        function btn_hide() {
            document.getElementById("btn_shfaqe").style.display = "none";
        }
    </script>
</head>
<body>
        <div>
        <button id="btn_shfaqe" style="display: none">
            jayesh</button>
        <a href="?tip=fin&vid_id=0" onclick="btn_hide();">test1</a>
        <script type="text/javascript">
            if (getParameterByName("tip") == "") {
                document.getElementById("btn_shfaqe").style.display = "";
            }
        </script>
    </div>
</body>
</html>

Upvotes: 0

Oleg
Oleg

Reputation: 9359

The links on navigates on the same page I have tried "return false;" but then my navigation doesn't work.

You want to hide the link and still be able to navigate?

There are two ways of solving the problem:

  1. Server-side: add a parameter to your url, like so: ?tip=fin&vid_id=0&hideButton=1 and on server side apply the display: none; style to your element if it is set. If you're using PHP, something along the lines of the following should do the trick:

    <?php if (isset($_GET['hideButton'])) { echo 'style="display: none;"'; }

  2. Client-side: write some flag value to localStorage when button is clicked. When the page is loaded, check if the flag is set. If it is set - hide the anchor.

    // Onclick handler:
myButton.addEventListener('click', function () {
    localStorage.setItem('hideButton', 'yes');
}, false);

// Onload handler:
window.addEventListener('load', function () {
    if (localStorage.getItem('hideButton') === 'yes') {
        myButton.style.display = 'none';
    }
});

Using one of these ways will hide the link while keeping navigation working. You don't even need to hide the button in the onclick event handler.

Upvotes: 0

user3519525
user3519525

Reputation:

Try this fot javascript :

<script>
    function visibilite() {
        var targetElement = document.getElementById(\'div_connexion\');
        targetElement.style.display = "none";
    }
</script>

and this in the html :

<div id="div_connexion"><a class="connexion" href="javascript:visibilite();">Connexion</a></div>

I have this on my website and when I click on the div it desapear until the user refresh the page.

Upvotes: 0

Sachin Gadagi
Sachin Gadagi

Reputation: 749

It is an anchor tag . I will navigate you to another page .

If you don't want to navigate to another page you may use

javascript:void(0)

as 

<a href="javascript:void(0)" onclick="btn_hide();">

Upvotes: 1

Related Questions