Help! Im new to JavaScript and jQuery and I'm lost.

Question

This challenge is to display a dismiss button at the bottom of the generated modal (I'm not sure what a modal is but I'm guessing its a generated window?)

This is the error message I get: 'Bummer! The last element in the modal is the placeholder, not the button. Did you use append() to append the button to the modal?' I thought "$('#modal').append($dismissButton);" would append the button string to the modal. I feel like I'm missing something simple but I can't figure it out.

Thank you for the help!!

js/app.js

//Create the Modal
var $modal = $("<div id='modal'></div>");

//Create a placeholder for text in the modal
var $placeHolder = $("<p id='placeHolder'>hello</p>");
$('modal').append($placeHolder);

//Create a button to dismiss modal and add it to modal
var $dismissButton = $("<button>Dismiss</button>");
$('#modal').append($dismissButton);

//Hide modal when button is pressed
$dismissButton.click(function(){
  $modal.hide(300);
});

$("body").append($modal);

//A function to show a modal
function displayModal(message) {
  $placeHolder.text(message);
  $modal.show();
}

//Show an example modal
displayModal("Hello World!");

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Modal Example</title>
</head>
<body>
    <h1>Modal Example Page</h1>

    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Answer 1 · 2017-10-27T22:19:23Z

October 27, 2017 10:19pm

So you can see that the modal variable is declared with the $ prefix ($modal). Your code is pretty much right except that you need to change your code from $('modal') or $('#modal') to the variable name that was declared in the first line, i.e.

$modal.append()

Welcome to the Treehouse Community

Looking to learn something new?

James Wood

James Wood

Help! Im new to JavaScript and jQuery and I'm lost.

1 Answer

Valeshan Naidoo

Valeshan Naidoo