函数调用在我的页面中不起作用

Question

I made an select menu that works with the google-font-Api. 我制作了一个与google-font-Api一起使用的选择菜单。 I made to function in JSBIN here is my work http://jsbin.com/ocutuk/18/ 我在JSBIN中运行的是我的工作http://jsbin.com/ocutuk/18/

But when i made the copy of my code in a html page its not even loading the font names in page. 但是当我在html页面中制作我的代码副本时，它甚至没有在页面中加载字体名称。 i tried to make it work but still it is in dead end. 我试图让它发挥作用，但它仍处于死胡同。 This is my html code 这是我的HTML代码

 <!DOCTYPE html>
 <html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
  <meta charset=utf-8 />
  <title>FONT API</title>
  <script>
    function SetFonts(fonts) { 
    for (var i = 0; i < fonts.items.length; i++) {      
    $('#styleFont')
     .append($("<option></option>")
     .attr("value", fonts.items[i].family)
     .text(fonts.items[i].family));
    }    
  }

  var script = document.createElement('script');
  script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo&callback=SetFonts';
  document.body.appendChild(script);


  WebFontConfig = {
google: { families: ['ABeeZee', 'Abel', 'Abril Fatface', 'Aclonica', 'Acme', 'Actor', 'Adamina', 'Advent Pro', 'Aguafina Script', 'Akronim', 'Aladin', 'Aldrich', 'Alegreya', 'Alegreya SC', 'Alex Brush', 'Alfa Slab One', 'Alice', 'Alike', 'Alike Angular', 'Allan', 'Allerta', 'Allerta Stencil', 'Allura', 'Almendra', 'Almendra Display', 'Almendra SC', 'Amarante', 'Amaranth', 'Amatic SC', 'Amethysta', 'Anaheim', 'Andada', 'Andika', 'Angkor', 'Annie Use Your Telescope', 'Anonymous Pro', 'Antic', 'Antic Didone', 'Antic Slab', 'Anton', 'Arapey', 'Arbutus', 'Arbutus Slab', 'Architects Daughter', 'Archivo Black', 'Archivo Narrow', 'Arimo', 'Arizonia', 'Armata', 'Artifika', 'Arvo', 'Asap', 'Asset', 'Astloch', 'Asul', 'Atomic Age', 'Aubrey', 'Audiowide', 'Autour One', 'Average', 'Average Sans', 'Averia Gruesa Libre', 'Averia Libre', 'Averia Sans Libre', 'Averia Serif Libre', 'Bad Script', 'Balthazar', 'Bangers', 'Basic', 'Battambang', 'Baumans', 'Bayon', 'Belgrano', 'Belleza', 'BenchNine', 'Bentham', 'Berkshire Swash', 'Bevan', 'Bigelow Rules', 'Bigshot One', 'Bilbo', 'Bilbo Swash Caps', 'Bitter', 'Black Ops One', 'Bokor', 'Bonbon', 'Boogaloo', 'Bowlby One', 'Bowlby One SC', 'Brawler', 'Bree Serif', 'Bubblegum Sans', 'Bubbler One', 'Buda', 'Buenard', 'Butcherman', 'Butterfly Kids', 'Cabin', 'Cabin Condensed', 'Cabin Sketch', 'Caesar Dressing', 'Cagliostro', 'Calligraffitti', 'Cambo', 'Candal', 'Cantarell', 'Cantata One', 'Cantora One', 'Capriola', 'Cardo', 'Carme', 'Carrois Gothic', 'Carrois Gothic SC', 'Carter One', 'Caudex', 'Cedarville Cursive', 'Ceviche One', 'Changa One', 'Chango', 'Chau Philomene One', 'Chela One', 'Chelsea Market', 'Chenla', 'Cherry Cream Soda', 'Cherry Swash', 'Chewy', 'Chicle', 'Chivo', 'Cinzel', 'Cinzel Decorative', 'Clicker Script', 'Coda', 'Coda Caption', 'Codystar', 'Combo', 'Comfortaa', 'Coming Soon', 'Concert One', 'Condiment', 'Content', 'Contrail One', 'Convergence', 'Cookie', 'Copse', 'Corben', 'Courgette', 'Cousine', 'Coustard', 'Covered By Your Grace', 'Crafty Girls', 'Creepster', 'Crete Round', 'Crimson Text', 'Croissant One', 'Crushed', 'Cuprum', 'Cutive', 'Cutive Mono']}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();


 $("#styleFont").change(function (){
   var id =$('#styleFont option' +':selected').val();  
                            $("#custom_text").css('font-family',id);

   });


  </script>
  <style>
      #custom_text {
  font-family: Arial;
  resize: none;
  margin-top: 20px;
  width: 500px;
     }
      #styleFont {
  width: 100px;
     }
    </style>

    </head>
    <body>
    <select id="styleFont">
    </select><br>
    <textarea id="custom_text"></textarea>
    </body>
    </html>

How can i make it work. 我怎样才能让它发挥作用。 Whats the mistake i am making here. 这是我在这里犯的错误。

Answer 1

Move your scripts to the bottom of the page. 将脚本移动到页面底部。 The problem as it is now is that the scripts are running before the DOM has formed. 现在的问题是脚本在DOM形成之前运行。

<!DOCTYPE html>
 <html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
  <meta charset=utf-8 />
  <title>FONT API</title>

  <style>
      #custom_text {
  font-family: Arial;
  resize: none;
  margin-top: 20px;
  width: 500px;
     }
      #styleFont {
  width: 100px;
     }
    </style>

    </head>
    <body>
    <select id="styleFont">
    </select><br>
    <textarea id="custom_text"></textarea>

    <script>
    function SetFonts(fonts) { 
    for (var i = 0; i < fonts.items.length; i++) {      
    $('#styleFont')
     .append($("<option></option>")
     .attr("value", fonts.items[i].family)
     .text(fonts.items[i].family));
    }    
  }

  var script = document.createElement('script');
  script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo&callback=SetFonts';
  document.body.appendChild(script);


  WebFontConfig = {
google: { families: ['ABeeZee', 'Abel', 'Abril Fatface', 'Aclonica', 'Acme', 'Actor', 'Adamina', 'Advent Pro', 'Aguafina Script', 'Akronim', 'Aladin', 'Aldrich', 'Alegreya', 'Alegreya SC', 'Alex Brush', 'Alfa Slab One', 'Alice', 'Alike', 'Alike Angular', 'Allan', 'Allerta', 'Allerta Stencil', 'Allura', 'Almendra', 'Almendra Display', 'Almendra SC', 'Amarante', 'Amaranth', 'Amatic SC', 'Amethysta', 'Anaheim', 'Andada', 'Andika', 'Angkor', 'Annie Use Your Telescope', 'Anonymous Pro', 'Antic', 'Antic Didone', 'Antic Slab', 'Anton', 'Arapey', 'Arbutus', 'Arbutus Slab', 'Architects Daughter', 'Archivo Black', 'Archivo Narrow', 'Arimo', 'Arizonia', 'Armata', 'Artifika', 'Arvo', 'Asap', 'Asset', 'Astloch', 'Asul', 'Atomic Age', 'Aubrey', 'Audiowide', 'Autour One', 'Average', 'Average Sans', 'Averia Gruesa Libre', 'Averia Libre', 'Averia Sans Libre', 'Averia Serif Libre', 'Bad Script', 'Balthazar', 'Bangers', 'Basic', 'Battambang', 'Baumans', 'Bayon', 'Belgrano', 'Belleza', 'BenchNine', 'Bentham', 'Berkshire Swash', 'Bevan', 'Bigelow Rules', 'Bigshot One', 'Bilbo', 'Bilbo Swash Caps', 'Bitter', 'Black Ops One', 'Bokor', 'Bonbon', 'Boogaloo', 'Bowlby One', 'Bowlby One SC', 'Brawler', 'Bree Serif', 'Bubblegum Sans', 'Bubbler One', 'Buda', 'Buenard', 'Butcherman', 'Butterfly Kids', 'Cabin', 'Cabin Condensed', 'Cabin Sketch', 'Caesar Dressing', 'Cagliostro', 'Calligraffitti', 'Cambo', 'Candal', 'Cantarell', 'Cantata One', 'Cantora One', 'Capriola', 'Cardo', 'Carme', 'Carrois Gothic', 'Carrois Gothic SC', 'Carter One', 'Caudex', 'Cedarville Cursive', 'Ceviche One', 'Changa One', 'Chango', 'Chau Philomene One', 'Chela One', 'Chelsea Market', 'Chenla', 'Cherry Cream Soda', 'Cherry Swash', 'Chewy', 'Chicle', 'Chivo', 'Cinzel', 'Cinzel Decorative', 'Clicker Script', 'Coda', 'Coda Caption', 'Codystar', 'Combo', 'Comfortaa', 'Coming Soon', 'Concert One', 'Condiment', 'Content', 'Contrail One', 'Convergence', 'Cookie', 'Copse', 'Corben', 'Courgette', 'Cousine', 'Coustard', 'Covered By Your Grace', 'Crafty Girls', 'Creepster', 'Crete Round', 'Crimson Text', 'Croissant One', 'Crushed', 'Cuprum', 'Cutive', 'Cutive Mono']}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();


 $("#styleFont").change(function (){
   var id =$('#styleFont option' +':selected').val();  
                            $("#custom_text").css('font-family',id);

   });


  </script>
    </body>
    </html>

Answer 2

Well, the reason is simple: 原因很简单：

You tried to manipulate some DOM elements before it gets fully loaded. 您试图在完全加载之前操纵一些DOM元素。

Wrapping your code inside a 将代码包装在一个

$(function(){
}

would solve the problem. 会解决问题。

More specifically, you can change your code to like this: 更具体地说，您可以将代码更改为：

  function SetFonts(fonts) {
  for (var i = 0; i < fonts.items.length; i++) {
  $('#styleFont')
   .append($("<option></option>")
   .attr("value", fonts.items[i].family)
   .text(fonts.items[i].family));
  }
}

$(function(){
var script = document.createElement('script');
script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo&callback=SetFonts';
document.body.appendChild(script);

 // all the rest of your code....
});

函数调用在我的页面中不起作用

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-12-08 05:01:44

解决方案2
0 2012-12-08 05:06:10

函数调用在我的页面中不起作用

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-12-08 05:01:44

解决方案2 0 2012-12-08 05:06:10

解决方案1
2 已采纳 2012-12-08 05:01:44

解决方案2
0 2012-12-08 05:06:10