The JavaScript-rendered HTML button is unresponsive

Question

The JavaScript-rendered HTML button is unresponsive

I have a JavaScript function that controls the display of a popup window based on its visibility. The function used to work perfectly, with the close button effectively hiding the window when clicked. However, after making some changes to the code, the close button no longer functions as intended. I have included both the previous and current versions of the function, along with the 'overlay' div it interacts with and the CSS styles for the div. Any assistance in identifying what went wrong and how to fix it would be highly appreciated. I am struggling to pinpoint the exact cause of the issue.

Previous (working) function:

<script>
function overlay(descrip, name) {
    var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br><input type='button' onclick='overlay()' value='Close'></input></div>";
    var el = document.getElementById("overlay");
    el.innerHTML = descripBox;
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

Current (not working) function:

<script>
function overlay(descrip, name, req) {
    if(req != ''){
        var obj = new Array();
        obj = req.split("|");
        var reqHtml = "Requirements:</br><ul>";
        for(var i = 0; i < obj.length; i++)
        {
            reqHtml += "<li>"+obj[i]+"</li>";
        }
        reqHtml+= "</ul></br>";
    }
    else
        var reqHtml = '';
    var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+
        reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>";
    var el = document.getElementById("overlay");
    el.innerHTML = descripBox;
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

Overlay div:

<div id="overlay">
     <div>
          </br>
          <input type="button" onclick="overlay()" value="Close"></input>
     </div>
</div>

CSS:

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 500px;        
     width:100%;
     height:100%;
     z-index: 1000;
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #ebebeb;
     border:2px solid #c7c7c7;
     padding:15px;   
}

javascript html css button

Answer 1

Answer №1

Initially, the code you have written appears quite peculiar.

    if(req != ''){
        var obj = new Array();
        obj = req.split("|");
        var reqHtml = "Requirements:</br><ul>";
        for(var i = 0; i < obj.length; i++)
        {
            reqHtml += "<li>"+obj[i]+"</li>";
        }
        reqHtml+= "</ul></br>";
    }

The section will be executed as you are invoking your function without any parameters :

 onclick="overlay()"

This results in 'req' being undefined. However, in JavaScript, undefined is treated as an empty string (your ''). Also, it is equal to 0 or false unless you use "!==" which signifies strictly not equal, indicating a requirement of an empty string.

Moreover, this part:

   else
        var reqHtml = '';

is problematic. It's ambiguous whether you forgot the brackets or not, but always enclose if/else statements within brackets to prevent errors when adding instructions between the lines. Additionally, using 'var' here confines the 'reqHTML' variable only within the "else" scope and renders it inaccessible outside.

Hence, it's advisable to declare it at the beginning of the function, resulting in the following code structure:

var reqHtml = '';
if(req != ''){
        var obj = new Array();
        obj = req.split("|");
        var reqHtml = "Requirements:</br><ul>";
        for(var i = 0; i < obj.length; i++)
        {
            reqHtml += "<li>"+obj[i]+"</li>";
        }
        reqHtml+= "</ul></br>";
}
var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+
        reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>";
var el = document.getElementById("overlay");

Furthermore, relying on detecting the CSS state for decision-making might not be ideal since it could lead to undefined values. Instead, defining a variable like "boxVisibility" to manage such aspects would prove more efficient and organized.

Lastly, all the function parameters seem to be undefined regardless. Thus, it's better to maintain them as global variables or retrieve them from another source before commencing the function. Refer to the example below for a potential working solution:

var descrip = "Test desc";
var name = "Test name";
var req = "test req";
var boxVisibility = true;

function updateBox() {
    var reqHtml = '';
    if(req != ''){
            var obj = new Array();
            obj = req.split("|");
            var reqHtml = "Requirements:</br><ul>";
            for(var i = 0; i < obj.length; i++)
            {
                reqHtml += "<li>"+obj[i]+"</li>";
            }
            reqHtml+= "</ul></br>";
        }
        var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+
            reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>";
        var el = document.getElementById("overlay");
        el.style.visibility = (boxVisibility) ? "hidden" : "visible";
}
function overlay() {
    boxVisibility = !boxVisibility; // Toggle the box visibility variable
    updateBox(); // Update box display
}

You should then modify 'desc', 'name', and 'req' based on the requirements of your application.

Answer 2

Initially, the code you have written appears quite peculiar.

    if(req != ''){
        var obj = new Array();
        obj = req.split("|");
        var reqHtml = "Requirements:</br><ul>";
        for(var i = 0; i < obj.length; i++)
        {
            reqHtml += "<li>"+obj[i]+"</li>";
        }
        reqHtml+= "</ul></br>";
    }

The section will be executed as you are invoking your function without any parameters :

 onclick="overlay()"

This results in 'req' being undefined. However, in JavaScript, undefined is treated as an empty string (your ''). Also, it is equal to 0 or false unless you use "!==" which signifies strictly not equal, indicating a requirement of an empty string.

Moreover, this part:

   else
        var reqHtml = '';

is problematic. It's ambiguous whether you forgot the brackets or not, but always enclose if/else statements within brackets to prevent errors when adding instructions between the lines. Additionally, using 'var' here confines the 'reqHTML' variable only within the "else" scope and renders it inaccessible outside.

Hence, it's advisable to declare it at the beginning of the function, resulting in the following code structure:

var reqHtml = '';
if(req != ''){
        var obj = new Array();
        obj = req.split("|");
        var reqHtml = "Requirements:</br><ul>";
        for(var i = 0; i < obj.length; i++)
        {
            reqHtml += "<li>"+obj[i]+"</li>";
        }
        reqHtml+= "</ul></br>";
}
var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+
        reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>";
var el = document.getElementById("overlay");

Furthermore, relying on detecting the CSS state for decision-making might not be ideal since it could lead to undefined values. Instead, defining a variable like "boxVisibility" to manage such aspects would prove more efficient and organized.

Lastly, all the function parameters seem to be undefined regardless. Thus, it's better to maintain them as global variables or retrieve them from another source before commencing the function. Refer to the example below for a potential working solution:

var descrip = "Test desc";
var name = "Test name";
var req = "test req";
var boxVisibility = true;

function updateBox() {
    var reqHtml = '';
    if(req != ''){
            var obj = new Array();
            obj = req.split("|");
            var reqHtml = "Requirements:</br><ul>";
            for(var i = 0; i < obj.length; i++)
            {
                reqHtml += "<li>"+obj[i]+"</li>";
            }
            reqHtml+= "</ul></br>";
        }
        var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+
            reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>";
        var el = document.getElementById("overlay");
        el.style.visibility = (boxVisibility) ? "hidden" : "visible";
}
function overlay() {
    boxVisibility = !boxVisibility; // Toggle the box visibility variable
    updateBox(); // Update box display
}

You should then modify 'desc', 'name', and 'req' based on the requirements of your application.

The JavaScript-rendered HTML button is unresponsive

Answer №1

Similar questions

Reduce the text of the link

Is there a glitch in Safari's CSS involving max-height?

Ways to retrieve and upload a blob from a file object

Are there any reliable sources for a complete list of browser CSS properties?

Adding elements in increasing order based on the array values

Failure to trigger AJAX Success or Error Events

What is the process for accessing the mesh in Aframe when a 3D object is loaded dynamically?

Ways to specify the specific option within a select field

Adapting CSS according to input selection

Streamlining the process of formatting URLs?

Tips for updating the class of a button upon clicking it

When I apply position: absolute; to my navigation bar, the anchor tags and links do not seem to function properly, especially with a video playing in the background

Utilizing jQuery to establish various AJAX requests through functions on page load and button click

AngularJS implementation that disables a button when the input field is empty

Optimizing loading times for mobile banners through media queries

Steps to simulate a TouchEvent programmatically using TypeScript

Saving changes to mesh vertices in r67 of Three.js

What are the steps to execute Mike Bostock's D3 demonstrations?

Insert a fresh item into the existing unordered list

The Keyup Filter in the FromEvent function is malfunctioning and not behaving as anticipated