Home/ Questions/Q 6238713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T11:15:46+00:00

In the code below, the CSS display element is not being read by the

  • 0

In the code below, the CSS display element is not being read by the Javascript and I don’t understand why. After putting in a debugger statement I saw display was empty even though I set it in the CSS. I’ve been staring at it for a while, so I’m probably missing something obvious.

<html>
<head>
<style type="text/css">
    div#image{ display: none; }
    div#url { display: none; }
</style>
<script type="text/javascript">
    function toggleVisibility(id) {
    debugger;
        var imageStyle = document.getElementById('image').style;
        var urlStyle = document.getElementById('url').style;
        alert(document.getElementById("image").style.display); // debug for stack
        if ( id == "image" ) {
            if ( imageStyle.display == "none" ) {
                imageStyle.display = "block";
                urlStyle.display = "none";
            }
        }

        if ( id == "url" ) {
            if ( urlStyle.display == "none" ) {
                urlStyle.display = "block";
                imageStyle.display = "none";
            }
        }
    }
</script>
</head>
<body>
    <form method="post" action="create.php">
        <input type="hidden" name="formType" value="create">
        <input type="radio" name="type" value="image" onClick="toggleVisibility('image');"> Image <input type="radio" name="type" value="url" onClick="toggleVisibility('url');"> URL
        <div id="image">
            Image div
        </div>
        <div id="url">
            URL div
        </div>
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Demo

    You can’t read css styles of attributes like that but an alternative is to check for an empty value and treat it like display:none

        if ( id == "image" ) {
        if ( imageStyle.display == "none" || !imageStyle.display) {
            imageStyle.display = "block";
            urlStyle.display = "none";
        }
    }

    if ( id == "url" ) {
        if ( urlStyle.display == "none" || !urlStyle.display) {
            urlStyle.display = "block";
            imageStyle.display = "none";
        }
    }
    • 0