Having trouble with conditional html "programming"

Question

Old onetime mainframe programmer. Trying to conditionally display or not display html. Searched and tried numerous suggestions. No luck. Would greatly appreciate help. Latest test attempt:

<html>
<head>
<title>July 27 - Lang Bay </title>
</head>
<script language="javascript">
    var x = 0;
    function hola(x) {
        if(x == 0) {           
          document.getElementById("showpage").style.visibility="hidden";
        }
    }
</script>
<body>
<div id="showpage">
    <p><font size=+1>July 27 - Lang Bay </font>
    <br><TABLE>
    <TR>
    <TD><br><a href="../../jpg/2009/090727_052p.jpg"><img SRC="../../jpg/2009/090727_052ptn.jpg"><br>B.C., Lang Bay<br>Afternoon on the beach </a>
    <TD><br><a href="../../jpg/2009/090727_053p.jpg"><img SRC="../../jpg/2009/090727_053ptn.jpg"><br>B.C., Lang Bay<br>Heather McCutcheon, Sydney </a>
</div>

</body> 
</html>

You have the function defined and everything good, but you didn't call (run) the function. — Dekel
– Dekel, Commented Dec 18, 2016 at 1:25
Another important thing - you need to make sure that you call the function after the page was completely loaded (otherwise the element with the id showpage isn't there yet, and you can't document.getElementById an element that doesn't exists yet). — Dekel
– Dekel, Commented Dec 18, 2016 at 1:27

RobG · Accepted Answer · 2016-12-18 01:43:39Z

The language attribute for script elements was deprecated in HTML 4 (1999) and has been removed in later versions. Don't use it.

In your code there is:

var x = 0;
function hola(x) {
  if (x == 0) {           
    document.getElementById("showpage").style.visibility="hidden";
  }
}

When you provide a parameter in the formal parameter list of a function declaration (i.e. the x in function hola(x){...} then it's equivalent to declaring the variable inside the function body, so x in the function references that local x, not the global one. You can either remove x from the parameter list, or pass it in the call, e.g.

function hola() {
  // use global x
}

or

function hola(x) {
  // use local x
}

// pass value of global x in the call
hola(x);

Since you haven't shown how hola is called, the simplest fix is the second.

As the comments have said, you need to call the function after the elements have loaded. Use window.onload for that:

window.onload = function() {
  hola(x);
}

Kyle Lin · Accepted Answer · 2016-12-18 01:50:22Z

0

Simple answer: wait for the window to load, then call hola. (In javascript, you need to call functions to invoke the code inside them).

window.addEventListener('load', function() {
  hola(0);
});

Additionally, you need to pass 0 into hola, because the x parameter declared in hola overrides the global variable x.

answered Dec 18, 2016 at 1:50

Kyle Lin

8698 silver badges18 bronze badges

Collectives™ on Stack Overflow

Having trouble with conditional html "programming"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related