• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 299
  • Last Modified:

How to hide or display HTML elements using Javascript function

I have javascript in an asp.net-mvc view that checks the id of four buttons and, based on the value of a property in the controller, set the style attribute to visible or hidden. The code is not working. The buttons always display. I am not sure if my code is incorrect of if the data.PairResolved element is not being picked up. Here is my javascript.

    <script type="text/javascript">
        function unlinkresolve() {
            if (document.getElementById("unlink")) or(document.getElementById("resolve"));
            {
                if (this.data.PairResolved) { return element.setAttribute('style', "visibility: visible"); }
                else { return element.setAttribute('style', "visibility: hidden"); }
            }
        }

        function unlinkunresolve() {
            if (document.getElementById("unresolve")) or(document.getElementById("unlinkunresolve"));
            {
                if (!this.data.PairResolved) { return element.setAttribute('style', "visibility: visible"); }
                else { return element.setAttribute('style', "visibility: hidden"); }
            }
        }
    </script>    
   
    <button type="button" id="unlink">UnLink</button>
    <button type="button" id="resolve">Resolve</button>
    <button type="button" id="unresolve">UnResolve</button>
    <button type="button" id="unlinkunresolve">UnLink/UnResolve</button>
0
rawilken
Asked:
rawilken
  • 5
  • 4
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
You 'if' statements aren't working because the elements are always there whether they are visible or not.  This is a simple one that I use.  The 'parts' variable is a counter that is used to track the last state.  cpart() increments parts and checks to see if it is even or odd and calls either part0() or part1() as a result.
<script type="text/javascript">

var parts = 0;
function cpart() {
	parts++;
	if(parts % 2) part0();
	else part1();
	return
	}

function part0() {
	document.getElementById('pa').style.visibility = 'hidden';
	}

function part1() {
	document.getElementById('pa').style.visibility = 'visible';
	}
</script>

Open in new window

0
 
rawilkenAuthor Commented:
You headed me in a new direction...here is what I came up with.

    <script type="text/javascript">
        function displaybuttons() {
            if (this.data.PairResolved) {
                document.getElementById('unlink').style.visibility = 'visible';
                document.getElementById('resolve').style.visibility = 'visible';
                document.getElementById('unresolve').style.visibility = 'hidden';
                document.getElementById('unlinkunresolve').style.visibility = 'hidden';
            }
            else {
                document.getElementById('unlink').style.visibility = 'hidden';
                document.getElementById('resolve').style.visibility = 'hidden';
                document.getElementById('unresolve').style.visibility = 'visible';
                document.getElementById('unlinkunresolve').style.visibility = 'visible';
            }
        }
    </script>
    <div onload="displaybuttons()" >   
        <button type="button" id="unlink">UnLink</button>
        <button type="button" id="resolve">Resolve</button>
        <button type="button" id="unresolve">UnResolve</button>
        <button type="button" id="unlinkunresolve">UnLink/UnResolve</button>
    </div>
0
 
rawilkenAuthor Commented:
But it does not work!
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Dave BaldwinFixer of ProblemsCommented:
This...  "if (this.data.PairResolved)" doesn't mean anything.  In addition, whatever gets done, Only gets done 'onload', when the page is loaded.  For the 'buttons' to do anything, each of them has to have an 'onclick' event in their attributes.
0
 
Albert Van HalenAnalyst developerCommented:
You cannot use onload event on a div.
Use it on the body.
0
 
rawilkenAuthor Commented:
I know the buttons need an onclick event. I have not started that part of the coding. I am trying to get the buttons to only appear based on a specific value of PairResolved.

I believe the problem now is that the javascript requires an event to load. I would want to place it in the onload event for the page, but this is asp.net-MVC and I do not know if and how to place that in the controller.

Here is the latest iteration. Unfortunately I have not resolved how to call the script. So if you have ideas on how to code this to be called in the controller it would be greatly appreciated. I will look into doing onclick events after this is resolved.

    <div>    
        <button type="button" id="unlink">UnLink</button>
        <button type="button" id="resolve">Resolve</button>
        <button type="button" id="unresolve">UnResolve</button>
        <button type="button" id="unlinkunresolve">UnLink &amp; UnResolve</button>
    </div>
    <script type="text/javascript">
        function displaybuttons() {
            if (data.PairResolved) {
                document.getElementById('unlink').style.visibility = 'visible';
                document.getElementById('resolve').style.visibility = 'visible';
                document.getElementById('unresolve').style.visibility = 'hidden';
                document.getElementById('unlinkunresolve').style.visibility = 'hidden';
            }
            else {
                document.getElementById('unlink').style.visibility = 'hidden';
                document.getElementById('resolve').style.visibility = 'hidden';
                document.getElementById('unresolve').style.visibility = 'visible';
                document.getElementById('unlinkunresolve').style.visibility = 'visible';
            }
        }
    </script>
0
 
rawilkenAuthor Commented:
I learned that the body tag has an onload event.

<body onload="displaybuttons()">
        <h2>@Model.SummaryText</h2>

        <div>    
            <button type="button" id="unlink">UnLink</button>
            <button type="button" id="resolve">Resolve</button>
            <button type="button" id="unresolve">UnResolve</button>
            <button type="button" id="unlinkunresolve">UnLink &amp; UnResolve</button>
        </div>
        <script type="text/javascript">
            function displaybuttons() {
                if (data.PairResolved) {
                    document.getElementById('unlink').style.visibility = 'visible';
                    document.getElementById('resolve').style.visibility = 'visible';
                    document.getElementById('unresolve').style.visibility = 'hidden';
                    document.getElementById('unlinkunresolve').style.visibility = 'hidden';
                }
                else {
                    document.getElementById('unlink').style.visibility = 'hidden';
                    document.getElementById('resolve').style.visibility = 'hidden';
                    document.getElementById('unresolve').style.visibility = 'visible';
                    document.getElementById('unlinkunresolve').style.visibility = 'visible';
                }
            }
        </script>
    </body>
0
 
Dave BaldwinFixer of ProblemsCommented:
'data.PairResolved' is still not a valid variable or object in the code you have posted.  At this point, it will merely cause an error.
0
 
rawilkenAuthor Commented:
The data.PairResolved is supposed to check the bool value of a property in the controller for PairResolved. This property returns a bool value if the flag for these records is set to true. How else would I access this value?
0
 
Dave BaldwinFixer of ProblemsCommented:
The question is where is 'data.PairResolved' defined because it is clearly not in the code you posted.  If that is an ASP variable, then you need to copy it into a javascript variable.  ASP runs on the server and javascript runs in the browser.  They do not communicate unless you make it happen.  Something like this.
<script type="text/javascript">
            PairResolved = <%= data.PairResolved %>;
            function displaybuttons() {
                if (PairResolved) {
                    document.getElementById('unlink').style.visibility = 'visible';
                    document.getElementById('resolve').style.visibility = 'visible';
                    document.getElementById('unresolve').style.visibility = 'hidden';
                    document.getElementById('unlinkunresolve').style.visibility = 'hidden';
                }
                else {
                    document.getElementById('unlink').style.visibility = 'hidden';
                    document.getElementById('resolve').style.visibility = 'hidden';
                    document.getElementById('unresolve').style.visibility = 'visible';
                    document.getElementById('unlinkunresolve').style.visibility = 'visible';
                }
            }
        </script>

Open in new window


http://msdn.microsoft.com/en-us/library/vstudio/6dwsdcf5%28v=vs.100%29.aspx
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now