javascript - My script is working in jsFiddle but not in my browser? -


i'm new programming in general. i'm learning html/css/javascript atm.

i created simple script allow user change font size of paragraph element.

i tired code jsfiddle , works fine, when copied html document , started page. html , css functioning properly, problem is: javascript not working. btw i'm using chrome browser.

is wrong html document..? i'm confused!

here working jsfiddle: https://jsfiddle.net/o60gtvh8/

my html file (download link / dropbox): https://www.dropbox.com/s/tl0npr5omefntv4/font%20size%20changer.rar?dl=0

html file code ( copy of code in html file provided in download link above ):

<!doctype html> <html> <head> <style> h1 {   color: blue;   font-size: 25px;   margin: 10px; }  h2 {   color: blue;   font-size: 15px;   margin: 10px; }  p {   margin: 10px; }  {   margin: 10px;   font-size: 15px;   text-decoration: none;   border: 1px solid grey;   background-color: cyan;   color: black;   padding: 3px; } </style>  <script> function sizechanger(size) {   return function() {     document.body.style.fontsize = size + 'px';   }; } var size10 = sizechanger(10); var size20 = sizechanger(20); var size30 = sizechanger(30);  document.getelementbyid('size-10px').onclick = size10; document.getelementbyid('size-20px').onclick = size20; document.getelementbyid('size-30px').onclick = size30; </script> </head>  <body> <h1>tiger</h1> <h2>(from wikipedia, free encyclopedia)</h2> <p>the tiger (panthera tigris) largest cat species, recognizable pattern of dark vertical stripes on reddish-orange fur lighter underside. species classified in genus panthera lion, leopard, jaguar, , snow leopard. </p> <a href="#" id="size-10px">font size 10</a> <a href="#" id="size-20px">font size 20</a> <a href="#" id="size-30px">font size 30</a> </body> </html>

move javascript end of page before closing body element. stands you're trying access elements don't exist yet. jsfiddle works because default wrap javascript code in window.onload event.

h1 {    color: blue;    font-size: 25px;    margin: 10px;  }    h2 {    color: blue;    font-size: 15px;    margin: 10px;  }    p {    margin: 10px;  }    {    margin: 10px;    font-size: 15px;    text-decoration: none;    border: 1px solid grey;    background-color: cyan;    color: black;    padding: 3px;  }
<h1>tiger</h1>  <h2>(from wikipedia, free encyclopedia)</h2>  <p>the tiger (panthera tigris) largest cat species, recognizable  pattern of dark vertical stripes on reddish-orange fur lighter underside.  species classified in genus panthera lion, leopard, jaguar, , snow leopard.  </p>  <a href="#" id="size-10px">font size 10</a>  <a href="#" id="size-20px">font size 20</a>  <a href="#" id="size-30px">font size 30</a>      <script>  function sizechanger(size) {    return function() {      document.body.style.fontsize = size + 'px';    };  }  var size10 = sizechanger(10);  var size20 = sizechanger(20);  var size30 = sizechanger(30);    document.getelementbyid('size-10px').onclick = size10;  document.getelementbyid('size-20px').onclick = size20;  document.getelementbyid('size-30px').onclick = size30;  </script>

so there's nothing wrong code (although should avoid legacy dom notation document.body.style.fontsize) -- you're executing early.


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more