I'm working on Hands-On Project 7-4 for the JavaScript Web Warrior Series (6th Edition). When you click the preview button, a box displaying the submitted delivery information should appear on the right side of the screen (see above). I cannot get the box to display and I can't figure out what might be wrong with my JavaScript (script.js). If someone can look at my code, and give me some pointers, I'd really appreciate it.

I've pasted all the relevant files into this question(HTML first, then css, then js, then the Modernizr text).

Hands-on Project 7-4

Pizza Order Form

Delivery Information

Name Street Address City Email Phone

Order

Crust

Thin Crust Deep Dish

Size

Small Medium Large Extra Large

Topping(s)

Pepperoni Sausage Green Peppers Onions Extra Cheese Special Instructions

Order Summary

Deliver to

Order

/* JavaScript 6th Edition Chapter 7 Hands-on Project 7-4

Filename: styles.css */

/* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* reset rules */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; max-width: 960px; background: white; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; -webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1), 0px 10px 10px rgba(50, 50, 50, 1), -10px 0px 10px rgba(50, 50, 50, 1); -moz-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1), 0px 10px 10px rgba(50, 50, 50, 1), -10px 0px 10px rgba(50, 50, 50, 1); box-shadow: 10px 0px 10px rgba(50, 50, 50, 1), 0px 10px 10px rgba(50, 50, 50, 1), -10px 0px 10px rgba(50, 50, 50, 1); }

ol, ul { list-style: none; }

/* page header */ header { background: #04819E; width: 100%; color: #FFFFFF; font-size: 48px; text-align: center; line-height: 1.5em; border-bottom: 1px solid black; }

/* main content */ article { width: 960px; text-align: left; background: ivory; padding: 20px; overflow: auto; }

h2 { font-weight: bold; font-size: 30px; text-align: center; width: 66.6667%; }

#errorMessage { display: none; width: 80%; text-align: center; padding: 10px; margin: 15px auto 5px; background: #e3d5ba; color: black; border: 5px solid rgb(190,50,38); font-weight: bold; }

/* form */ form { padding: 10px; width: 66.6667%; float: left; }

fieldset { margin-bottom: 10px; position: relative; padding: 2.5em 1em 0.5em 1em; background: #e3d5ba; }

fieldset fieldset { padding-top: 15px; }

legend, #submit, #instrlabel { font-family: arial, helvetica, sans-serif; font-weight: bold; }

legend { position: absolute; top: 0; left: 0; font-size: 1.25em; margin-top: 0.5em; margin-left: 0.5em; }

fieldset fieldset legend { font-size: 1em; margin-top: 25px; top: -30px; left: 8px; }

input, textarea { font-size: 1em; }

#instructions { display: block; }

#deliveryinfo, #orderinfo, #additionalinfo, #submitbutton { border: none; }

#deliveryinfo label { display: block; float: left; clear: left; margin-top: 5px; }

#deliveryinfo input { display: block; margin-left: 135px; }

#nameinput, #emailinput, #addrinput { width: 20em; }

#cityinput, #phoneinput { width: 12em; }

#crustbox label, #toppingbox label { margin-right: 25px; }

#instrlabel { display: block; margin: 1em 0 0.5em 0; }

textarea { margin-bottom: 1em; }

#previewBtn { font-size: 1.25em; }

#previewbutton { background: inherit; border: none; padding: 0.5em 0 0 0; text-align: center; }

section { float: right; width: 33.3333%; background: white; border: 3px solid #04819E; margin-top: 10px; display: none; }

section h2 { width: 100%; background: #e3d5ba; padding: 5px; }

section div { margin-left: 20px; display: none; padding: 10px; }

section div p { margin-bottom: 5px; }

section div p span { font-weight: bold; }

section li { list-style-type: none; margin-left: 20px; }

h3 { font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 1.25em; margin-top: 0.5em; margin-left: 0.5em; }

/* JavaScript 6th Edition Chapter 7 Hands-on Project 7-4

Author: Jenn B Date: Sept. 19, 2017

Filename: index.htm */ "use strict"; //interpret content in JavaScript strict mode

//global variable var delivInfo = {}; var delivSummary = document.getElementById("deliverTo");

//add input values into the object function processDeliveryInfo() { delivInfo.name = document.getElementById("nameinput").value; delivInfo.addr = document.getElementById("addrinput").value; delivInfo.city = document.getElementById("cityinput").value; delivInfo.email = document.getElementById("emailinput").value; delivInfo.phone = document.getElementById("phoneinput").value; for(var prop in delivInfo) { delivSummary.innerHTML += "

" + delivInfo[prop] + "

"; } }

//function will call and display the data entered by the user function previewOrder() { processDeliveryInfo(); document.getElementById("deliverTo").style.display = "block"; }

//create an event listener for the submit button function createEventListener() { var previewButton = document.getElementById("previewBtn"); if (previewButton.addEventListener) { previewButton.addEventListener("click", previewOrder, false); } else if (previewButton.attachEvent) { previewButton.attachEvent("onclick", previewOrder); } }

//create listener event on page load if(window.addEventListener) { window.addEventListener("load", createEventListener, false); } else if (window.attachEvent) { window.attachEvent("onload", createEventListener); }

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD * Build: http://modernizr.com/download/#-input-inputtypes-shiv-cssclasses-load */ ;window.Modernizr=function(a,b,c){function v(a){j.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}function A(){e.input=function(c){for(var d=0,e=c.length;d",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f

Hands-on Project 7-4 Pizza Order Form Delivery Information Name Street Addressb City Email Phone Order Summary Deliver to Order va beach 123@yahoo.com 1234567890 va beach 123@yahoo.com 1234567890