CODEWITHSUNDEEP
javascripthtml
user3412531
user3412531

Reputation: 27

Error: function undefined

I am getting the following Error in chrome: 

Uncaught ReferenceError: buildPopup is not defined

but I am defining it in my head:

<head>
    <script type="text/javascript" src="assets/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="assets/js/info.js"></script>
</head>

info.js:

function showPopup()
{
    $("#popup").animate({
        "height": "500px",
        "width": "500px",
        "marginLeft": "-250px",
        "marginTop": "-250px",
        "opacity": "1"
    }, 500);
}
function buildPopup(title, text)
{
    if (document.getElementById("popup")!=undefined)
    {
        destroyPopup();
    }

    var p = document.createElement("div");
p.id = "popup";
p.innerHTML = "<img src=\"//"+window.location.host+"/assets/img/static/X.png\" style=\"float: right;\" onclick\"destroyPopup();\"/><iframe seamless="seamless" frameBorder="0"><h1>"+title+"</h1><br><p>"+text+"</p></iframe>";
p.style = "opacity: 0;position: fixed;z-index: 999;top: 50%;width: 6px;height: 6px;margin-top: -3px;overflow: hidden;left: 50%;margin-left: -3px;background-color: cyan;border: 3px groove red;";
document.body.appendChild(p);
    showPopup();
}
function destroyPopup()
{
    $("popup").remove();
}

and I am calling it in body like this:

<body>
    <a href="#" onclick="buildPopup('Help','This is the Help')">Help</a>
</body>

Chrome loads jQuery.js and info.js without errors.

Upvotes: 0

Views: 556

Answers (2)

Guffa
Guffa

Reputation: 700152

You have some syntax errors in your code, so the functions will never be created. That's why you get that error message.

You are missing a + in this part of the code:

..." + window.location.host "...

It should be:

..." + window.location.host + "...

You have some quotation marks that are not escaped here:

<iframe seamless="seamless" frameBorder="0">

It should be:

<iframe seamless=\"seamless\" frameBorder=\"0\">

When you have fixed those, you will face the next problem, which several have already pointed out. You can't use document.write once the page is completely loaded.

Upvotes: 3

epascarello
epascarello

Reputation: 207501

You CAN NOT use document.write after the page load! So what will happen is when you call it again, the page will just have the pop up code.

You should be be using appendChild to add new elements after the page load. 

var newDiv = document.createElement("div");
newDiv.id = "popup";
newDiv.className = "UseAClassNotInlineStyle";
newDiv.innerHTML = "<p>BOOM</p>";
document.body.appendChild(newDiv);

or since you are using jQuery, you can just replace the line

//document.write(h);
$(h).appendTo(document.body);

NOW for why the code does not run. I pasted the code into the console and you get the error

Uncaught SyntaxError: Unexpected string fiddle.jshell.net/:38

Looking at line 38 I see

var h = "<div id=\"popup\" style=\"opacity: 0;position: fixed;z-index: 999;top: 50%;width: 6px;height: 6px;margin-top: -3px;overflow: hidden;left: 50%;margin-left: -3px;background-color: cyan;border: 3px groove red;\"><img src=\"//"+window.location.host"/assets/img/static/X.png\" style=\"float: right;\" onclick\"destroyPopup();\"/><iframe seamless="seamless" frameBorder="0"><h1>"+title+"</h1><br><p>"+text+"</p></iframe></div>";

Now looking at the code you will see that there is an error in that line where you are adding the host.

Always look at the console when developing!

Upvotes: 2

Related Questions