Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Dialog JavaScript

Posted by James Ryan Draper
James Ryan Draper
2,107 Points

Form attributes

Hi,

I tried to use Visual Studio 2017 to create the html and js on this tutorial but looks like the form doesn't have the 'dialog' attribute. Any advice?

Mike Hatch
Mike Hatch
14,940 Points
Mike Hatch
Mike Hatch
14,940 Points

You'd need to provide the code (using Markdown!) for both of your files for us to debug it.

James Ryan Draper
James Ryan Draper
2,107 Points

Hi Mike,

Here's the code which is from the HTML Dialog Video:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <dialog id="dialogWindow"> <form method="dialog"> <input type="text" /> <button type="submit">OK</button> </form> </dialog>

    <button id="openDialog">Open Dialog</button>
    <button id="openModalDialog">Open Modal Dialog</button>

    <script src="app.js"></script> 
</body>

</html>

app.js:

(function () { // Gather page elements var openDialog = document.getElementById('openDialog'); var openModalDialog = document.getElementById('openModalDialog'); var dialogWindow = document.getElementById('dialogWindow'); // Open the dialog window normally openDialog.addEventListener('click', function () { dialogWindow.show(); }); // Open the dialog window as modal openModalDialog.addEventListener('click', function () { dialogwindow.showModal(); }); })()

I use Visual Studio 2017 as my tool for future implementation.

Mike Hatch
Mike Hatch
14,940 Points
Mike Hatch
Mike Hatch
14,940 Points

James, have you solved this already or do you still need help?

Good to see you were able to figure out how to use Markdown. You haven't included it around your entire code, though. Which still makes it hard for anyone to read. Take a second look at the Markdown Cheatsheet or alternatively you can use this Github Markdown Cheatsheet. The key code your looking for is proper use of backticks.

James Ryan Draper
James Ryan Draper
2,107 Points

Thanks for your advice Mike. I think the code works now. I need to use Chrome to preview my code moving forward.