javascript - How Do I Move JSON and JS From Inside An HTML File To External Files? -

javascript - How Do I Move JSON and JS From Inside An HTML File To External Files? -

i'd move json , javascript within html external files.

the next examples test running create sure info beingness pulled in. 1 time start adding in actual data, json , js grow , don't want cluttering html.

that , there 3rd parties editing json info on needed basis don't want them doing within html.

here's illustration @ codepen: http://codepen.io/frankdraws/pen/btvcr

here's code:

class="snippet-code-js lang-js prettyprint-override">var info = { "preferredflexpay":[ { pricemonth:"$20.00 / month", pricedownpayment:"$10.00 / downwards payment" } ]} // preferred annual pass flex pay month var output='<span class="price-month">'; (var in data.preferredflexpay) { output+=data.preferredflexpay[i].pricemonth; } output+='</span>'; document.getelementbyid('preferred-fp-month').innerhtml=output; // preferred annual pass flex pay downpayment var output='<span class="price-downpayment">'; (var in data.preferredflexpay) { output+=data.preferredflexpay[i].pricedownpayment; } output+='</span>'; document.getelementbyid('preferred-fp-downpayment').innerhtml=output; class="snippet-code-css lang-css prettyprint-override">body, html { background: rgba(73,155,234,1); background: -moz-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(0,81,168,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%); background: radial-gradient(ellipse @ center, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#499bea', endcolorstr='#0051a8', gradienttype=1 ); background-size:cover; width:100%; height:100%; font: normal 20px/1.8em roboto, helvetica, sans-serif; padding: 8px; margin: auto; } div { max-width: 450px; height: auto; background: #fff; margin: auto; border-radius: 4px; padding:20px; } class="snippet-code-html lang-html prettyprint-override"><div> <table class="fp-table"> <tr><td id="preferred-fp-month"></td></tr> <tr><td id="preferred-fp-downpayment"></td></tr> </table> </div>

you set javascript in own file, traditionally .js extension, , refer file in html using script tag:

<script src="yourfile.js"></script>

(anything set between start , end tag ignored browser.)

similarly css (extension .css):

<link rel="stylesheet" href="yourfile.css">

if had json (you don't in question, felix pointed out), typically go in file .json extension , you'd load via xhr (ajax). typically if have static info want utilize in javascript, declare javascript variables , such directly.

javascript json