왜이 JQuery/Javascript가 작동하지 않습니까?

-3

내가 작업하고있는 맞춤 검색 엔진의 맞춤 설정 섹션에 문제가 있습니다. "배경 그림 설정"은 Codecadamey의 웹 사이트에서 작동하지만 Chrome에서 열면 작동하지 않습니다. 또한 다른 두 개의 사용자 정의 섹션이 작동하지 않습니다, 나는 누군가가 내게 틀린 말을하거나이 문제를 해결할 수있는 힌트/리소스를 줄 수 있기를 바라고 있습니다. 미리 감사드립니다! 코드는 다음과 같습니다.왜이 JQuery/Javascript가 작동하지 않습니까?

<!DOCTYPE html> 
<html> 
<head> 
<title>Custom Search</title> 
<style type="text/css"> 
* { margin: 0; padding: 0; } 
html { 
background: url("http://cdn.desktopwallpapers4.me/wallpapers/movies/1920x1080/2/12424-darth-vader-star-wars-1920x1080-movie-wallpaper.jpg") no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

td {text-align:center;} 


#page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } 

p { font: 15px/2 Times New Roman; margin: 0 0 30px 0; text-indent: 40px; } 
.srch {padding: 20px 0px 200px 0px;} 

.header {font: Times New Roman; color: white; text-align: center; padding: 300px 0px 0px 0px; font-size: 550%; line-height: 40%;} 
.pbg {color: white; text-align: center;} 

.button {width:75px;} 

.tst1 {height:50px; width:150px; background-color:blue; cursor:pointer;} 

/*the panel that slides down*/ 
.panel {height:120px; width:100%; background-color:#dddddd; position:relative;} 

.tab {height:18px; width:75px; margin:auto; background-color:#cccccc; border-bottom-left-radius:15px; border-bottom-right-radius:15px; border:2px outset #aaaaaa; text-align:center; cursor:pointer;} 

.altbut {padding:5px; width:156px} 


</style> 





<script type="text/javascript"> 

function background() { 

var bkgrnd = $("input[name=background_url]").val(); 

$("style").append("html {background: url('" + bkgrnd + "') no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}"); 
}; 


function link() { 

var url = $("input[name=link_url]").val(); 

var name = $("input[name=button_name]").val(); 

$("span").append("<button type='button' class='button' onclick='window.location='" + url + "'>" + name + "</button>"); 
}; 


function head() { 

var headerName = $("input[name=header_text]").val() 

$(".header").empty() 

$(".header").append("'" + headerName + "'") 
} 


$(document).ready(function(){ 
$('.tab').click(function(){ 
$('.panel').slideToggle('slow'); 
}); 
}); 



</script> 


</head> 




<body> 



<div class="panel"><center> 
<table> 
<tr> 
    <td>Change the background</td> 
    <td>Add a link</td> 
    <td>Change the header</td> 
</tr> 
<tr> 
    <td><input type="text" name="background_url" placeholder="Paste a URL..."/></td> 

    <td><input type="text" name="link_url" placeholder="Paste a URL..."/></td> 

    <td><input type="text" name="header_text" placeholder="Header"/></td> 
</tr> 
<tr> 
    <td><button class="altbut" onclick="background()">Set background picture</button></td> 

    <td><input type="text" name="button_name" placeholder="Button name"</td> 

    <td><button class="altbut" onclick="head()">Set the Header</button></td> 
</tr> 

<tr> 
    <td></td> 
    <td><button class="altbut" onclick="link()">Add link button</button></td> 
</tr> 
</table> 

</div></center> 






<div class="tab">Customize</div> 

<iframe width="0" height="0" src="http://www.youtube.com/embed/3F4vRmro50U?autoplay=1" frameborder="0"></iframe> 

<div class="header">Who's Your Daddy?</div> 
<br> 
<div class="pbg">(Powered By Google)</div> 
<div class="srch"> 
<center> 
<form method="get" action="http://www.google.com/search"> 
<div> 
<input type="text" name="q" size="100" placeholder="What are you looking for?"> 
<button type="submit" class="button">Search</button> 
</div></form></center> 
</div> 
<hr> 



<center> 
<span> 

<button type="button" class="button" onclick="window.location='https://mail.google.com/mail/?tab=wm#inbox'">Gmail</button> 

<button type="button" class="button" onclick="window.location='https://www.facebook.com/'">Facebook</button> 

<button type="button" class="button" onclick="window.location='https://www.youtube.com/?tab=w1'">Youtube</button> 

<button type="button" class="button" onclick="window.location='http://www.ebay.com/'">eBay</button> 

<button type="button" class="button" onclick="window.location='https://www.google.com/imghp?hl=en&amp;tab=wi'">Images</button> 

<button type="button" onclick="test()">Customize</button> 

</span> 
</center> 


</body></html>

출처

2013-06-24 user2503334

http://learn.jquery.com/about-jquery/how-jquery-works/ –

, jsFiddle.com에 예를 게시는 것 정말로 우리가 당신이보고있는 것을 알도록 도와주세요. –

다음 번에는 "작동하지 않는다"는 말의 의미에 대해 구체적으로 설명하십시오. –

jQuery 라이브러리를 첨부하지 않았습니다. 당신은 당신의 현재 스크립트 전에 다음을 추가 할 수 있습니다이이 종료되기 전에

이

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

출처

2013-06-24 00:58:00

저는 초심자이므로 당신의 이야기에 대해/어떻게해야할지 모르겠습니다. 나는 항상 태그 사이에 JQuery를 넣도록 가르쳐왔다. 지금까지 JQuery를 작성하는 것이 잘못된 방법일까요? – user2503334

내가 처음 쓴 코드는 거기에 없었습니다. – user2503334

의 섹션에 코드를 추가합니다. 앤드류는 위에 썼습니다. –

왜이 JQuery/Javascript가 작동하지 않습니까?

답변

관련 문제